@utility grid-flex {
  --_cols: var(--cols);
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap, 1rlh);
  width: 100%;

  > *,
  > *:where(astro-island, astro-slot) > *,
  > :where(.contents) > * {
    --one-column: var(--gap, 1rlh) * (var(--_cols, 1) - 1);
    flex: var(--grow, var(--span, 1)) var(--span, 1)
      calc(
        (100% - var(--one-column)) / var(--_cols, 1) * var(--span, 1) +
          (var(--span, 1) - 1) * var(--gap, 1rlh)
      );
    min-width: min(100%, var(--item-width, 3rem));
    max-width: 100%;
  }
}

@utility grid-flex-gallery {
  & {
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap, 1rlh);
    width: 100%;

    > * {
      flex: 1 1 0px;
      min-width: var(--item-width, 3rem);
    }
  }
}