_aspect-ratio.scss

// Media container
// 
// Responsiviness with padding hack.

// SCSS Map
$media-aspect-ratios: (
  4  : 3,
  3  : 2,
  16 : 9,
  2  : 1
);

@each $aspect-1, $aspect-2 in $media-aspect-ratios {
  // Landscape mode
  .ar-#{$aspect-1}-#{$aspect-2} {
    --ar-x: #{$aspect-1};
    --ar-y: #{$aspect-2};
  }
  // Portrait mode
  .ar-#{$aspect-2}-#{$aspect-1} {
    --ar-x: #{$aspect-2};
    --ar-y: #{$aspect-1};
  }
}
.ar-1-1 {
  --ar-x: 1;
  --ar-y: 1;
}

// Aspect-ratio boxes
[class*="ar-"] {

  width: var(--media-width, 100%);
  display: block;
  position: relative;
  overflow-y: hidden;

  // Padding hack for predefined size
  &:before {
    content: "";
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    padding-top: calc( var(--ar-y, 1) / var(--ar-x, 1) * 100% );
  }
  // Clearfix
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  // img, video, everything
  > :first-child:not(.mini-info) {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  > img:not(.cover) {  
    height: auto !important;
  }

  iframe, embed, object, video { border: 0; } // Opinionated reset
}