Aspect Ratio
Predefined aspect ratio tokens for consistent media and container proportions.
Ratios
--ratio-square1:1 (1)--ratio-landscape4:3 (4/3)--ratio-portrait3:4 (3/4)--ratio-widescreen16:9 (16/9)--ratio-ultrawide18: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;
}