Aspect ratio utility

[antonieIPR]

As a suggestion, would it be convenient to have aspect ratios as classes? For instance:

.ar-1-1{
    aspect-ratio: 1/1;
}
.ar-4-3{
    aspect-ratio: 4/3;
}
.ar-16-9{
    aspect-ratio: 16/9;
}

*NOTE: Appearantly Safari browsers do not support this feature yet: Workaround from https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-dealing-with-legacy-browser-support :

.element {
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .element::before {
    float: left;
    padding-top: 100%;
    content: "";
  }

  .element::after {
    display: block;
    content: "";
    clear: both;
  }
}

[antonieIPR]

Edit; Safari DOES support the feature:

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio#browser_compatibility