置かれた場所の幅に応じて縦型⇄横型に切り替わるカード。ビューポートではなく親要素を基準にする@containerの実践例です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
親要素に container-type: inline-size を指定すると、その要素が「問い合わせコンテナ」になり、子は @container で親の幅に応じたスタイルを書けます。メディアクエリとの違いは基準です: 同じカードをサイドバー（狭い）と本文（広い）に置いたとき、ビューポート基準では区別できませんが、コンテナ基準ならそれぞれの置き場所に最適な形になります。再利用部品と相性のよい、コンポーネント時代のレスポンシブ手法です。
container-typeを指定した要素は幅の計算が「包含を作る」挙動に変わるため、レイアウトの外枠ではなくカードの直親スロットに指定するのが安全です。
コンテナクエリで縦型⇄横型が切り替わるカードを作ってください。親スロットにcontainer-type: inline-sizeを指定し、@container (min-width: 420px)でgridを2カラムの横型に変形させてください。