////////////////////////////////
// CORE / MIXINS / ASPECT RATIOS
////////////////////////////////


// Maintain aspect ratio
@mixin ratio($imp:null) {
  overflow: hidden $imp;
  position: relative $imp;

  &::before {
    content: '' $imp;
    display: block $imp;
    width: 100% $imp;
  }

}


// Child
@mixin ratio-child($imp:null) {
  bottom: 0 $imp;
  left: 0 $imp;
  position: absolute $imp;
  right: 0 $imp;
  top: 0 $imp;
}


// Aspect ratios
@mixin ratio-16x9($imp:null) { padding-top: 56.25% $imp; }  // 16×9  Landscape
@mixin ratio-9x16($imp:null) { padding-top: 177.77% $imp; } // 9×16  Portrait
@mixin ratio-4x3($imp:null) { padding-top: 75% $imp; }      // 4×3   Landscape
@mixin ratio-3x4($imp:null) { padding-top: 133.33% $imp; }  // 3×4   Portrait
@mixin ratio-1x1($imp:null) { padding-top: 100% $imp; }     // 1×1   Square