== 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 must not widen, no matter with `auto-fill`ed 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
Sizes follow
| | Viewport | Mobile 320px-639px | Tablet 640px-1119px | Desktop 1120px-1679px | Desktop wide 1680px+
| -- | -- | -- | -- | -- | --
| **Items in List** | | | | | |
| 1 | | 100% | 22rem | 22rem | 22rem
| 2 | | 1: 100% per row, wrapped | 22rem | 22rem | 22rem
== 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`