Design sheets
In-progress UI explorations for the Evolved page.
How the card behaves as the carousel slot narrows
Every card stays the same height regardless of how many fit per row. As the viewport narrows, the carousel goes from 3 cards visible to 2, then to 1 — each surviving card gets wider. Inside, text size and emoji size never change; the description and title wrap to extra lines as width shrinks.
Card uses the exact same classes as the live Explore card —min-h-[180px],text-lg title,text-[160px] emoji,py-6. At the floor (single card under 250px wide) description drops so the title can wrap into the freed space.
Breakpoints (viewport): ≥1024px → 3 cards · ≥640px → 2 cards · else 1 card. Adjust freely — these are starting values.
3 cards visible
Wide viewports — full content, single-line title, desc fits 1–2 lines.
Switch: 3 → 2 cards
Below 1024px each card would be < ~330px wide; we drop to 2 cards so each one breathes again.
Switch: 2 → 1 card
Below 640px each of 2 cards would be < ~290px wide; drop to 1 card. Title and desc wrap freely.
Floor: 1 card, no description
Below ~250px card width the desc gets cramped — drop it so title can wrap into the space.