== Background / Goal
Coming from T406628, there are certain viewport configurations and item combinations where the design is not followed at the moment.
{F66750317 width=50%}
{F66755264 width=50%}
**Viewports range causing items:**
Between ~1050 and 1190px with 3 items
**Items causing issues**
Under three items saved.
=== Requirements
We've settled on the Card internals in layout and text clamping.
- 4 Cards limit per row, even on widest desktop
- Cards should auto-fill the space whenever possible on mobile, on tablet and desktop only when there's enough Cards (2 on tablet, 3 on desktop) available
- Codex gap of 16px should never widen, no matter if auto-filled rows
- Left align Cards always for best readability, no center alignment if number of cards < available space
We have
- `22rem` (equal to 352px) as minimal Card width and
- `28rem` (equal to 448px) as max Card with, alternatively
- `1fr` equal to 100% to fill up the Grid row
| Viewport x available items | Mobile 320px-639px | Tablet 640px-1119px | Desktop 1120px-1679px | Desktop wide 1680px+
| -- | -- | -- | -- | --
| 1 | 100%
== Developer notes
Best user experience with use of `:has` which is slightly less supported than `display: grid`, we need both in combination.
The support difference seems negligible though, see comment below.
== Acceptance criteria for done
[] Left align in these causes instead of widening the `gap`