@use 'sass:math';

@mixin aspect-ratio($width, $height) {
  aspect-ratio: #{$width} / #{$height};

  // Support for Safari 10-14 (Big Sur and earlier)
  @supports not (aspect-ratio: #{$width} / #{$height}) {
    position: relative;

    &::before {
      content: '';
      display: block;
      padding-top: math.div($height, $width) * 100%;
      width: 100%;
    }

    > .content {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}