.col {align-items: center;}

.media-frame {
  position: relative; 
  display: inline-block;
  max-width: 50vw;
  max-height: 50vh;
  width: min(100%, 50vh);
  aspect-ratio: var(--media-aspect, auto); 
}

.media-frame__base {
  position: relative; 
  display: block; 
}

.media-frame__layer {
  position: absolute; 
  top: 0;
  left: 0; 
}

.media-frame__square {
  aspect-ratio: 1; 
}

.fill-frame {
  width: 100%;
  height: 100%; 
}

.fit-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: pixelated; 
}