.masonry {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
  max-width: 100%;
  grid-template-rows: masonry;

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

.masonry-gallery {
  display: grid;
  grid-template-columns: repeat(
    grid-template-rows: masonry; auto-fill,
    minmax(min(var(--item-width, 3rem), 100%), 1fr)
  );
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
  max-width: 100%;

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