Ratios

Aspect ratio tokens for responsive media containers.

16:9 (Widescreen)

16:9

4:3 (Standard)

4:3

1:1 (Square)

1:1

Golden Ratio (1.618:1)

φ (Golden)

/* CSS Variables */
--ratio-16-9: 16 / 9;
--ratio-4-3: 4 / 3;
--ratio-1-1: 1 / 1;
--ratio-golden: 1.618 / 1;

/* Usage */
.media-container {
  aspect-ratio: var(--ratio-16-9);
}