/*
AspectRatio

A box that keeps a width-to-height ratio at any width. Its content fills
it, so an image or video has its space before it loads and nothing below
it moves when it arrives.

  .aspect-ratio                 position: relative; aspect-ratio from style
  .aspect-ratio > *             fills the box
  .aspect-ratio[data-fit]       object-fit for img and video
*/

@layer components {

.aspect-ratio {
  position:  relative;
  display:   block;
  width:     100%;
  min-width: 0;
  overflow:  hidden;
}

.aspect-ratio > * {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  margin:   0;
}

.aspect-ratio > :is(img, video, iframe, canvas, svg) {
  display: block;
  border:  0;
}

.aspect-ratio[data-fit="cover"] > :is(img, video)   { object-fit: cover; }
.aspect-ratio[data-fit="contain"] > :is(img, video) { object-fit: contain; }
.aspect-ratio[data-fit="fill"] > :is(img, video)    { object-fit: fill; }

}