.grid-flex {
  --_cols: var(--cols);
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap, 1rlh);
  max-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, 3rlh));
    max-width: 100%;
  }
}