@roadtrip/css/styles/utilities/_aspect-ratio.css

CSS framework for Roadtrip Design System

/*
 * Aspect Ratio utilities
 *
 */

.ratio {
  position: relative;
  width: 10rem;
  background-color: var(--road-surface-inverse);
}

.ratio-1x1{
  aspect-ratio: 1 / 1;
}

.ratio-16x9{
  aspect-ratio: 16 / 9;
}

.ratio-4x3{
  aspect-ratio: 4 / 3;
}

.ratio-21x9{
  aspect-ratio: 21 / 9;
}

.ratio-3x4{
  aspect-ratio: 3 / 4;
}

.ratio-3x2{
  aspect-ratio: 3 / 2;
}

.ratio-9x16{
  aspect-ratio: 9 / 16;
}