/*
  Aspect ratio utilities

  Note: the fallback adds a black background with the image in the middle.
*/
.aspect-ratio-1\:1          { padding-top: 100%;                       }
.aspect-ratio-1\:2          { padding-top: calc(2/1  * 100%);          }
.aspect-ratio-2\:1          { padding-top: calc(1/2  * 100%);          }
.aspect-ratio-2\:3          { padding-top: calc(3/2  * 100%);          }
.aspect-ratio-3\:2          { padding-top: calc(2/3  * 100%);          }
.aspect-ratio-3\:4          { padding-top: calc(4/3  * 100%);          }
.aspect-ratio-4\:3          { padding-top: calc(3/4  * 100%);          }
.aspect-ratio-9\:16         { padding-top: calc(16/9 * 100%);          }
.aspect-ratio-16\:9         { padding-top: calc(9/16 * 100%);          }
.aspect-ratio-4\:3\+0\.5rem { padding-top: calc(3/4  * 100% + 0.5rem); }

[class*=aspect-ratio-] {
  background-color: #212121;
  display: block;
  height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 0;
  z-index: 10;
}

[class*=aspect-ratio-] > * {
  height: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
}

@supports (object-fit: cover) {
  [class*=aspect-ratio-] { background-color: transparent; }

  [class*=aspect-ratio-] > * {
    height: 100%;
    left: 0;
    object-fit: cover;
    top: 0;
    transform: translate3d(0, 0, 0);
  }
}