ブレークポイントBreakpoint

「ブレークポイント（Breakpoint）」を実装してください。

## これは何か
この幅を境にレイアウトを変える、という切り替え点。スマートフォンとパソコンの境目を決める。

## 使いどころ
- 同じHTMLで、画面幅ごとに見せ方を変えたいとき
- 2列を1列に畳む幅を決めたいとき

## 実装の要件
- @media (max-width: 900px) のように、崩れる幅で区切る
- 区切りは2〜3個まで。中身が崩れる幅を実際に測って決める
- カードやサイドバーの中身のように、置き場所によって幅が変わる部品の中の切り替えは、画面の幅ではなく親の幅で決める @container を使う（Chrome・Edge は 105 から、Safari は 16 から、Firefox は 110 から）
- container-type: inline-size は幅が外側で決まる親に付ける。付けた要素は中身から幅を決めなくなるので、width も flex: 1 も無い inline-block・float・横並びの flex の子に付けると幅が 0 に潰れる
- 端末名で決めない。特定の機種に合わせた値は、機種が変わるたびに古くなる。崩れる幅で決める
- 区切りを増やしすぎると、確認する組み合わせが増えて保てなくなる。2〜3個に絞る
- 幅だけで判断しない。指で押すのかマウスなのかは幅とは別（pointer: coarse で判定する）

## アクセシビリティの要件
- 幅を変えても、読む順序が変わらないようにする
- 文字サイズを固定しない。利用者が拡大したときも崩れないようにする
- 狭い画面で内容を消さない。隠すなら、別の場所から辿れるようにする

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

```html
<div class="x-breakpoint">
  <p class="x-breakpoint__t">900px 以下で1列に畳む</p>
  <div class="x-breakpoint__wide"><span>A</span><span>B</span></div>
  <p class="x-breakpoint__t">狭い画面では</p>
  <div class="x-breakpoint__narrow"><span>A</span><span>B</span></div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-breakpoint,
.x-breakpoint *:not([class*="fa-"]),
.x-breakpoint *:not([class*="fa-"])::before,
.x-breakpoint *: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-breakpoint {
  width: 216px;
}
.x-breakpoint__t {
  margin: 0 0 5px;
  font-size: 10.5px;
  color: #606a7b;
}
.x-breakpoint__wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 9px;
}
.x-breakpoint__narrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.x-breakpoint__wide span,
.x-breakpoint__narrow span {
  display: grid;
  place-items: center;
  height: 24px;
  border: 1px solid #cfd4dc;
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
  color: #606a7b;
}
```

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