ギャラリーGallery

「ギャラリー（Gallery）」を実装してください。

## これは何か
画像を格子状に並べて見せる表示。押すと大きく開く形にすることが多い。

## 使いどころ
- 写真が主役で、数が多いとき
- 一覧から選んで、詳細を開かせたいとき

## 実装の要件
- ul + grid。縦横比は aspect-ratio で揃える
- loading="lazy" は、開いた時点で画面の外にある画像にだけ付ける。格子は画面が広いほど最初に見える枚数が増えるので、大きい画面で最初から見えうる先頭の行には付けない。付けると読み込みが遅れ、LCP になる画像なら LCP も遅れる
- 1枚あたりが小さすぎると何が写っているか分からない。3列以上にするなら縦横比を揃える
- 枚数が多いときは読み込みを遅らせる。全部を一度に読むと重い
- 並びの意味（新しい順・人気順）を示さないと、探しにくい

## アクセシビリティの要件
- ul > li で並べ、枚数が伝わるようにする。list-style: none にするなら、Safari がリストとして読むよう ul に role="list" を足す
- 画像ごとに意味のある alt を書く
- 押して拡大するなら、押せる要素は button か a にする

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

```html
<ul class="x-gallery" role="list">
  <!-- 3列の先頭の行は最初の画面に入るので loading="lazy" を付けない。付けるのは画面の外から始まる画像だけ -->
  <li><img 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="展示作品 1" width="64" height="64"></li>
  <li><img 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="展示作品 2" width="64" height="64"></li>
  <li><img 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="展示作品 3" width="64" height="64"></li>
  <li><img 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="展示作品 4" width="64" height="64" loading="lazy"></li>
  <li><img 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="展示作品 5" width="64" height="64" loading="lazy"></li>
  <li><img 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="展示作品 6" width="64" height="64" loading="lazy"></li>
</ul>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-gallery,
.x-gallery *:not([class*="fa-"]),
.x-gallery *:not([class*="fa-"])::before,
.x-gallery *: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-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 202px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.x-gallery img {
  display: block;
  width: 100%;
  /* height 属性の 64px が残ると aspect-ratio が効かないので、CSS で height: auto に戻す */
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  object-fit: cover;
}
```

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