アバターAvatar

「アバター（Avatar）」を実装してください。

## これは何か
利用者を表す小さな丸い画像。写真が無いときは頭文字や既定の絵で埋める。

## 使いどころ
- 投稿やコメントの書き手を示すとき
- 複数人が関わるものに、誰がいるかを並べて見せるとき

## 実装の要件
- img を border-radius: 50% で丸くする。object-fit: cover で歪ませない
- 画像が無いときの代替（頭文字）を用意する
- 画像が無い人を空白にしない。頭文字か既定の絵を出す
- 小さくしすぎると顔が判別できない。24px を下限の目安にする
- アバターだけで人を識別させない。名前を併記する

## アクセシビリティの要件
- 画像の alt には人の名前を入れる。「アバター」とは書かない
- 名前が隣に書いてあるなら、画像の alt は空にして読み上げの重複を避ける
- 頭文字で代用するときも、名前を読み上げられる形にする

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

```html
<div class="x-avatar">
  <span class="x-avatar__i" aria-hidden="true">名</span>
  <div>
    <p class="x-avatar__n">名前さん</p>
    <p class="x-avatar__s">9月21日 に投稿</p>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-avatar,
.x-avatar *:not([class*="fa-"]),
.x-avatar *:not([class*="fa-"])::before,
.x-avatar *: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-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.x-avatar__i {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 700;
}
.x-avatar__n {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
}
.x-avatar__s {
  margin: 0;
  font-size: 11px;
  color: #606a7b;
}
```

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