Responsive — Before

Navigation (desktop: links visible)

Grid — 4 columns (desktop)

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8

Container Query

Wide container — horizontal layout

The card adapts based on its container width, not the viewport.

Narrow container

Should stack vertically via @container.

Viewport Units

width: 50vw (max 600px)
height: 15vh

Responsive Typography

clamp(16px, 2.5vw, 32px)

This text scales with viewport width.

Aspect Ratio

16:9
4:3
1:1