.o-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block; //In case it's applied to a non-block element.
  
  &:after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
  }
  
  > *,
  > .o-ratio__item.o-ratio__item.o-ratio__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@mixin aspect-ratio($width, $height) {
  padding-bottom: ($height / $width) * 100%;
}

.o-ratio--16x9:after {
  @include aspect-ratio(16,9);
}
.o-ratio--2x1:after {
  @include aspect-ratio(16,8);
}

.o-ratio--16x7:after {
  @include aspect-ratio(16,7);
}

.o-ratio--20x9:after {
  @include aspect-ratio(20,9);
}

.o-ratio--1x1:after {
  @include aspect-ratio(1,1);
}

.o-ratio--3x4:after {
  @include aspect-ratio(3,4);
}

.o-ratio--4x3:after {
  @include aspect-ratio(4,3);
}