サムネイルThumbnail

「サムネイル（Thumbnail）」を実装してください。

## これは何か
中身を小さく縮めて見せる画像。一覧の中で、どれがどれかを見分ける手がかりになる。

## 使いどころ
- 一覧で、文字だけでは選べないものを並べるとき
- 動画や記事の内容を、開く前に想像してもらいたいとき

## 実装の要件
- loading="lazy" は開いた時点で画面の外にある画像にだけ付ける。一覧の先頭のように、大きい画面では最初から見えうる画像には付けない
- object-fit: cover で縦横比を保ったまま枠を埋める
- 一覧の先頭など、LCP 要素（最初の画面でいちばん大きく描かれる画像や文字）になりそうなサムネイルには fetchpriority="high" を付ける。付けるのは1〜2枚に絞る。それより多いと優先度の指定が効かず、LCP 要素の表示が速くならない
- 縦横比をばらばらにしない。並べたときに視線が乱れる
- 元画像をそのまま縮小表示すると、無駄に重い。縮小したファイルを用意する
- 文字を焼き込んだ画像は、小さくすると読めない。文字はHTMLで置く

## アクセシビリティの要件
- 内容を表す画像には alt を書く。隣に同じ説明があるなら alt="" にして重複を避ける
- width と height を指定して、読み込み中の高さのずれを防ぐ

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

```html
<figure class="x-thumbnail">
  <!-- 一覧の先頭など、最初の画面に入りうる画像には loading="lazy" を付けない。画面の外から始まる画像にだけ付ける -->
  <img class="x-thumbnail__f" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Crect width='16' height='9' fill='%23dbe3f7'/%3E%3C/svg%3E"
       alt="紅葉した低山の尾根道" width="176" height="99">
  <figcaption class="x-thumbnail__c">秋の低山と紅葉の記事</figcaption>
</figure>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-thumbnail,
.x-thumbnail *:not([class*="fa-"]),
.x-thumbnail *:not([class*="fa-"])::before,
.x-thumbnail *: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-thumbnail {
  width: 176px;
  margin: 0;
}
.x-thumbnail__f {
  display: block;
  width: 100%;
  height: 99px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  object-fit: cover;
}
.x-thumbnail__c {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #606a7b;
}
```

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