リンクカードLink card

「リンクカード（Link card）」を実装してください。

## これは何か
見出し・説明・画像をひとまとめにして、全体を1つのリンクにしたもの。記事の紹介や関連ページへの誘導に使う。

## 使いどころ
- 記事の中で別の記事を紹介するとき。テキストリンクより行き先の中身が伝わる
- 一覧で、タイトルだけでは選べない項目を並べるとき

## 実装の要件
- a 要素でカード全体を包む。中に a や button を置かない
- カードの中にリンクを入れ子にしない。a の中に a を書くと、ブラウザは内側の a の手前で外側を閉じるので、それ以降の文字がカードのリンクから外れる
- カード全体をリンクにすると、中の文字を選択しづらくなる。引用したい文章は入れない
- 同じ見た目のカードが並ぶと、どれも読み飛ばされる。並べる数を絞る

## アクセシビリティの要件
- リンクの名前が見出しの文字になるようにする。装飾の画像は alt="" にする
- カード全体を押せるようにしたら、フォーカス枠もカード全体に出す
- 「続きを読む」だけをリンク名にしない

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

```html
<a class="x-link-card" href="/blog/naming/">
  <span class="x-link-card__thumb" aria-hidden="true">
    <i class="fa-regular fa-file-lines"></i>
  </span>
  <span class="x-link-card__body">
    <span class="x-link-card__t">パーツの名前を揃えると、レビューが速くなる</span>
    <span class="x-link-card__d">呼び名が人によって違うと、指摘が伝わるまでに往復が増えます。</span>
  </span>
</a>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-link-card,
.x-link-card *:not([class*="fa-"]),
.x-link-card *:not([class*="fa-"])::before,
.x-link-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-link-card {
  display: flex;
  gap: 12px;
  width: 260px;
  padding: 12px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  color: #1b2028;
  text-decoration: none;
}
.x-link-card:hover {
  border-color: #1d4ed8;
}
.x-link-card__thumb {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef2ff;
  color: #1d4ed8;
}
.x-link-card__t {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}
.x-link-card__d {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #606a7b;
}
.x-link-card:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
```

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