.grid-gallery,
.grid-gallery-fit {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    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: var(--colstart) / span var(--span);
    grid-row: var(--rowstart) / span var(--rowspan);
    max-width: 100%;
  }
}

.grid-gallery-fill {
  display: grid;
  grid-template-columns: repeat(
    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: var(--colstart) / span var(--span);
    grid-row: var(--rowstart) / span var(--rowspan);
    max-width: 100%;
  }
}