CSSコンテナクエリの基本的な使い方をメモ。

CSS コンテナークエリー - CSS: カスケーディングスタイルシート | MDN

<div class="post">
  <div class="card">
    <h2>カードのタイトル</h2>
    <p>カードのコンテンツ</p>
  </div>
</div>

.post {
  container-type: inline-size;
}

/* カードタイトルの既定のスタイルを設定 */
.card h2 {
  font-size: 1em;
}

/* コンテナーが 700px より広い場合 */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

container-name

container-name プロパティを使用して、コンテナーコンテキストに名前を付けることが可能です。一度名前をつけると、その名前を @container クエリーで使用することができ、特定のコンテナーを対象とすることができます。

.post {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}