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

  &::before {
    content: '';
    display: block;
  }

  embed,
  iframe,
  img,
  object {
    bottom: 0;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
  }

  //ratios
  // 1:1
  &--1-1 {
    &::before {
      padding-top: 100%;
    }
  }
  // 3:1
  &--3-1 {
    &::before {
      padding-bottom: calc(100% / 3);
    }
  }
  // 3:2
  &--3-2 {
    &::before {
      padding-bottom: calc((2 / 3) * 100%);
    }
  }
  // 4:3
  &--4-3 {
    &::before {
      padding-bottom: calc((3 / 4) * 100%);
    }
  }
  // 16:9
  &--16-9 {
    &::before {
      padding-bottom: calc((9 / 16) * 100%);
    }
  }
  // 18:6
  &--18-6 {
    &::before {
      padding-bottom: calc((63 / 26) * 100%);
    }
  }
}