Progressive Aspect Ratio (Found on CodyHouse)

aspect-ratio.html

<ul class="wrapper">
  <li class="aspect-ratio-1:1"></li>
  <li class="aspect-ratio-16:9"></li>
  <li class="aspect-ratio-4:3"></li>
</ul>

aspect-ratio.scss

// 👇 target all aspect-ratio classes
[class*="aspect-ratio"] {
  --aspect-ratio: 16/9;
  // 👇 padding-bottom hack
  height: 0;
  padding-bottom: calc(100%/(var(--aspect-ratio)));
  
  // 👇 use aspect-ratio property if supported
  @supports (aspect-ratio: 16/9) {
    aspect-ratio: var(--aspect-ratio);
    height: initial;
    padding-bottom: initial;
  }
}

// 👇 aspect-ratio utility classes
.aspect-ratio-16\:9 { --aspect-ratio: 16/9; }
.aspect-ratio-4\:3  { --aspect-ratio: 4/3; }
.aspect-ratio-1\:1  { --aspect-ratio: 1/1; }

// Demo stuff
body {
  padding: 2em;
}

.wrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1em;
  
  > * {
    background-color: blueviolet;
    width: 200px;
  }
}