Aspect Ratio
Predefined aspect ratio tokens for consistent media and container proportions.
Ratios
--ratio-square 1:1 (1) --ratio-landscape 4:3 (4/3) --ratio-portrait 3:4 (3/4) --ratio-widescreen 16:9 (16/9) --ratio-ultrawide 18:5 (18/5) --ratio-golden φ (1.618/1) Usage
.video-embed {
aspect-ratio: var(--ratio-widescreen);
width: 100%;
}
.avatar {
aspect-ratio: var(--ratio-square);
width: 3rem;
}