/**
 * 左画像/右本文ブロック — フロントエンド共通（全投稿タイプ）
 * magazine/article.css と同じ見た目。マガジン以外の CPT でも適用される。
 *
 * すべてのルールを .magazine-block-image-text 配下に限定し、
 * このブロックの外には影響しないようにしている。
 * コンテナは .article-component.magazine-block-image-text（詳細度0,2,0）で
 * テーマ共通の `.editor div { margin: 2em 0 }`（0,1,1）に勝たせている。
 */

.article-component.magazine-block-image-text {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 24px 0 0;
}

.magazine-block-image-text .magazine-block-image-text-left {
  flex: 0 0 auto;
  max-width: 360px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.magazine-block-image-text .magazine-block-image-text-image {
  margin: 0;
}

.magazine-block-image-text .magazine-block-image-text-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.magazine-block-image-text .magazine-block-image-text-caption {
  margin: 0;
  font-size: 12px;
  line-height: 21px;
  color: #5a677d;
  letter-spacing: 0.03em;
}

.magazine-block-image-text .magazine-block-image-text-caption p {
  margin: 0;
}

.magazine-block-image-text .magazine-block-image-text-text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.04em;
}

.magazine-block-image-text .magazine-block-image-text-text > *:first-child {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .article-component.magazine-block-image-text {
    flex-direction: column;
    gap: 16px;
  }
}