/*--------------------------------------------------
    .o-ratio
  --------------------------------------------------*/

$dh-ratios: (
  2:1,
  3:2,
  4:3,
  16:9
) !default;

.o-ratio {
  position: relative;
  display: block;
  overflow: hidden;

  &:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
  }

}


.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
  position: absolute;
  top:    0;
  bottom: 0;
  left:   0;
  height: 100%;
  width:  100%;
}





// Ratio variants
@each $antecedent, $consequent in $dh-ratios {

  @if (type-of($antecedent) != number) {
    @error "`#{$antecedent}` needs to be a number."
  }

  @if (type-of($consequent) != number) {
    @error "`#{$consequent}` needs to be a number."
  }

  .o-ratio--#{$antecedent}\:#{$consequent}:before {
    padding-bottom: ($consequent/$antecedent) * 100%;
  }
}