カードCard

「カード（Card）」を実装してください。

## これは何か
画像・見出し・説明をひとまとまりの箱に入れて見せる部品。同じ形を並べて一覧にする使い方が多い。

## 使いどころ
- 同じ種類のものを並べて、見比べながら選ばせたいとき
- 画像が選ぶ手がかりになるとき（商品・記事・施設）

## 実装の要件
- article か li の中に、画像 + 見出し + 説明 を置く
- 高さを揃えるため、グリッドの子として height: 100% にする
- 見出しや説明の位置もカード同士で揃えるなら subgrid を使う（Chrome・Edge は 117 から、Safari は 16 から、Firefox は 71 から）
- グリッドの直接の子をカードにし、display: grid; grid-template-rows: subgrid; grid-row: span 3; を付ける（3 は直下の子の数。価格も置くなら 4）。ul > li > article の形なら、li と article の両方にこの3つを付ける
- subgrid のカードは中身を div などで包まず直下に置き、どのカードも同じ数・同じ順にする。見本の .x-card__body は外し、左右の余白は中身の各要素の padding-inline へ移す。親の gap が中にも入るので、カードで row-gap を指定し直す
- 影を重ねて浮かせすぎない。並ぶと画面が騒がしくなる。境界線1本で足りることが多い
- 中の情報量をカードごとに変えない。高さが揃わないと視線が乱れる
- カード全体をリンクにするなら、中にリンクやボタンを入れない。a の中に a を書くと、ブラウザが内側の手前で外側を閉じてカードが分かれてしまう

## アクセシビリティの要件
- 見出しは h2 や h3 でマークアップする。太字の div にしない
- カード全体を押せるようにするなら、見出しのリンクに ::after を重ねて当たり判定を広げる
- 一覧にするときは ul > li で囲み、いくつあるか伝わるようにする

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<article class="x-card">
  <div class="x-card__thumb" aria-hidden="true"><i class="fa-regular fa-image"></i></div>
  <div class="x-card__body">
    <h3 class="x-card__t">軽量リュック 18L</h3>
    <p class="x-card__d">通勤と1泊旅行を1つでまかなえる容量です。</p>
    <p class="x-card__p">7,800円</p>
  </div>
</article>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-card,
.x-card *:not([class*="fa-"]),
.x-card *:not([class*="fa-"])::before,
.x-card *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-card {
  width: 220px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.x-card__thumb {
  height: 62px;
  display: grid;
  place-items: center;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 18px;
}
.x-card__body {
  padding: 10px 12px 12px;
}
.x-card__t {
  margin: 0 0 4px;
  font-size: 13px;
  /* 見出しタグに頼らず、このクラスだけで同じ見え方にする */
  font-weight: 700;
}
.x-card__d {
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #606a7b;
}
.x-card__p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。