A bento grid that sizes itself to the screen it lands on, plus a tile treatment in four
shapes. Cells declare their span in one attribute — data-bento="2x1" — and
the engine clamps that span to the live column count, so a wide cell never drags a
scrollbar onto a phone. Gapless mode draws hairline rules instead of gutters. Keys
1–4 switch the tile shape; H hides the panel.
A layout, not a template. Every cell states its size once and holds it down to a phone.
One treatment, four silhouettes, all cut with clip-path or
border-radius so they scale with the cell instead of pinning to a size.
Hover opens the chamfer, swings the arch round to the top-right, and draws the rule out
to full width. With reduced motion asked for, the shapes hold still.
The same engine at six columns with a 150px row floor — readouts, a chart block and two links. It halves to three columns on a tablet and drops to two on a phone, and the wide cells shrink with it.