/* Avoid percentage-height and flex/aspect-ratio sizing cycles in mobile WebKit. */
@media (max-width: 1023px) {
  :is(.home-page #featured, .products-page main) .grid > .group {
    height: auto !important;
    min-width: 0;
    align-self: stretch;
  }

  /* A padding ratio keeps the same 4:3 cover without using its image's intrinsic height. */
  :is(.home-page #featured, .products-page main) .grid > .group > [class~="aspect-[4/3]"] {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    aspect-ratio: auto;
    flex: 0 0 auto;
  }

  :is(.home-page #featured, .products-page main) .grid > .group > [class~="aspect-[4/3]"] > img,
  :is(.home-page #featured, .products-page main) .grid > .group > [class~="aspect-[4/3]"] > [role="img"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  :is(.home-page #featured, .products-page main) .grid > .group > .flex-1 {
    flex: 1 0 auto;
    min-width: 0;
  }

  :is(.home-page #featured, .products-page main) .grid > .group > .flex-1 > .mt-auto {
    flex-shrink: 0;
    flex-wrap: wrap;
    row-gap: 8px;
  }
}