Container query cards

/* 1. Declare the query container on the wrapper */
.card-wrapper {
  container-type: inline-size;
  container-name: cards;
}

/* 2. Default: single column */
.card-grid {
  display: grid;
  gap: 1rem;
}

/* 3. Two columns when wrapper is ≥ 28rem */
@container cards (min-width: 28rem) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 4. Three columns when wrapper is ≥ 44rem */
@container cards (min-width: 44rem) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 5. Compact (horizontal) card layout when narrow */
@container cards (max-width: 27.9rem) {
  .card { display: flex; }
  .card .thumb { width: 4.5rem; aspect-ratio: 1; flex-shrink: 0; }
}

You are a senior frontend engineer.

Goal: Build a card grid that responds to container width (not viewport) using CSS container queries.

Technical constraints:
- Declare container-type: inline-size on the wrapper. Give it a container-name.
- Default: single column. At ≥28rem: 2 columns. At ≥44rem: 3 columns.
- Bonus: At <28rem, flip the card to a horizontal (flex) layout with a small square thumbnail on the left.
- Each card has: a thumbnail area (aspect-ratio: 16/9 or 1:1 in compact), a title, and a short description.

Framework variant (choose one):
A) Vanilla HTML + CSS — a self-contained demo.
B) React — a CardGrid component that accepts cards as an array of { title, description, emoji } props. The container-query logic lives in CSS; the component just renders a wrapper + children.

Edge cases:
- The grid should fall back to a single column if @container is unsupported (the default CSS already handles this).
- Don't use media queries — the whole point is container-aware layout.

Return clearly separated HTML + CSS (or TSX + CSS module).