<style>
/* highlights専用：カードは常に1列、中央寄せで読みやすく */
.page-highlights .card-stack{
  display: grid;
  grid-template-columns: 1fr;      /* 常に1列 */
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.page-highlights .card{
  max-width: 900px;                /* 行幅を抑えて可読性UP（お好みで） */
  margin-inline: auto;
}

/* カード内メディア（任意）：画像・図のラッパ */
.card__media{
  margin: 0 0 .75rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;                /* ローディング時の下地 */
}
/* デフォルトは16:9。個別に style="aspect-ratio: 4/3" 等で上書き可 */
.card__media img{
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;               /* 画像を切り出して枠にフィット */
  display: block;
}

/* 図注（任意） */
.card__caption{
  margin: .4rem 0 0;
  font-size: .9rem;
  color: var(--muted);
}



/* 親だけをグリッド化して gap を効かせる（強めのセレクタで上書き） */
.page-highlights .page .card-stack{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-block: var(--space-2);
}

/* 子カード側は margin を付けない（gap と二重にならないように） */
.page-highlights .card-stack > .card{ margin: 0; }

/* gap が効かない環境向けフォールバック */
@supports not (gap: 1rem){
  .page-highlights .card-stack > .card + .card{
    margin-top: var(--space-2);
  }
}

/* 隙間の「見え方」を少し強めたいとき（任意） */
.page-highlights .page .card-stack{
  background: transparent;           /* ここは透明でOK */
}
.page-highlights .card{
  background-clip: padding-box;      /* 影と境界の見え方を綺麗に */
}

</style>

