// Aspect ratio boxes

@supports (--custom: property) {
  [style*='--aspect-ratio'] {
    display: block;
    position: relative;

    &::before {
      content: '';
      display: block;
      padding-bottom: calc(100% / (var(--aspect-ratio)));
    }

    > *:first-child {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
    }
  }
}