@utility masonry {
  & {
    @apply grid-repeat-auto;
    grid-template-rows: masonry;

    > *,
    > *:where(.contents) > *,
    > *:where(astro-island, astro-slot) > * {
      grid-column-end: span var(--span, 1);
      align-self: start;
    }
  }
}

@utility masonry-gallery {
  & {
    @apply masonry;
    grid-template-columns: repeat(
      auto-fill,
      minmax(min(var(--item-width, 3rem), 100%), 1fr)
    );
  }
}