/* ── Case bento, Style G v4 ─────────────────────────────────────────────────
   Every drawing is a Figma export of one tile's ground (file Ryis98fsDZ3HUGKKxXTPOa),
   drawn twice: a desktop canvas and a phone canvas. A tile is its label and its
   drawing, nothing else.

   One scale per page. --u is the size of one drawing unit in px. Each page sets
   it to the largest value at which every ground still fits its tile, capped at
   1px, so every drawing on the page renders at the same scale and none is ever
   shown larger than it was drawn. 100cqw is the width of the bento grid. */
.sc { container-type: inline-size; }

/* The tile body is the tinted ground, inset the way the Figma tile insets it.
   A tile is as tall as the tallest in its row, so the drawing centres in the
   ground and any slack reads as ground, not as a hole. */
.cell--drawn .cell__b { flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-width: 0;
  padding: 0; margin: 12px 17px 17px; border-radius: 8px;
  background: var(--bento-ground, #EDEBE6); }

.bento-il { flex: 0 0 auto; line-height: 0; width: calc(var(--w) * var(--u, 1px)); }
.bento-il svg { display: block; width: 100%; height: auto; }
.bento-il--m { display: none; }

/* Below the desktop grid the tiles pair up, as in the Figma phone frames. The
   full-width tiles and the way in span both columns. */
@media (max-width: 899.98px) {
  .sc .sc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    --u: min(1px, (100cqw - 24px) / 334, ((100cqw - 10px) / 2 - 24px) / 150); }
  .sc .cell--wide, .sc .c-cta { grid-column: 1 / -1; }
  .sc .cell__k { padding: 12px 12px 0; font-size: 10px; }
  .cell--drawn .cell__b { margin: 10px 11px 11px; }
  .bento-il--d { display: none; }
  .bento-il--m { display: block; }
}