アスペクト比ボックスAspect ratio box

「アスペクト比ボックス（Aspect ratio box）」を実装してください。

## これは何か
幅が変わっても縦横の比を保つ枠。画像や動画の読み込み前から場所を確保しておける。

## 使いどころ
- 埋め込み動画や地図を、幅に合わせて縮める必要があるとき
- 読み込み中に高さが変わって、本文が飛ぶのを防ぎたいとき

## 実装の要件
- aspect-ratio: 16 / 9 と object-fit: cover を組で使う
- img には width / height 属性も書く
- padding-top のパーセントで比を作る古い手は、もう不要。aspect-ratio を使う
- 中身が比に合わないと余白ができる。object-fit で埋めるか、余白を背景色で揃える
- 比を決め打ちすると、縦長の画像が切れる。用途ごとに比を選ぶ

## アクセシビリティの要件
- 画像には width と height を書く。ブラウザが比を計算して場所を確保する
- 中身が装飾なら aria-hidden、内容なら alt や title を持たせる

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

```html
<div class="x-aspect-box">
  <div class="x-aspect-box__f" aria-hidden="true">16 : 9</div>
  <div class="x-aspect-box__s" aria-hidden="true">1 : 1</div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-aspect-box,
.x-aspect-box *:not([class*="fa-"]),
.x-aspect-box *:not([class*="fa-"])::before,
.x-aspect-box *: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-aspect-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.x-aspect-box__f {
  width: 144px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px dashed #cfd4dc;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  color: #606a7b;
}
.x-aspect-box__s {
  width: 74px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px dashed #cfd4dc;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  color: #606a7b;
}
```

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