@property --cols {
  syntax: '<integer> | auto';
  initial-value: 1;
  inherits: false;
}

@property --colstart {
  syntax: '<integer> | auto';
  initial-value: auto;
  inherits: false;
}

@property --span {
  syntax: '<number> | auto';
  initial-value: 1;
  inherits: false;
}

@property --rowspan {
  syntax: '<integer> | auto';
  initial-value: 1;
  inherits: false;
}

@property --rowstart {
  syntax: '<integer> | auto';
  initial-value: auto;
  inherits: false;
}

/* Major change here to set to width to 100% and max-width is self-set */
@utility grid-scaffold {
  & {
    display: grid;
    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
    width: 100%;

    > *,
    > *:where(.contents) > *,
    > *:where(astro-island, astro-slot) > * {
      grid-column: var(--colstart) / var(--colend, span var(--span));
      grid-row: var(--rowstart) / var(--rowend, span var(--rowspan));
      max-width: 100%;
    }
  }
}

/*********************
 * Simple Grid and Repeat Auto *
 *********************/
@utility grid-simple {
  @apply grid-scaffold;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

@utility grid-repeat-auto {
  @apply grid-scaffold;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
}

/*********************
 * Fr Auto / Auto Fr *
 * These are often used with :md modifier
 *********************/
@utility grid-fr-auto {
  @apply grid-scaffold;
  grid-template-columns:
    repeat(calc(max(var(--cols) - 1, 1)), minmax(0, 1fr))
    minmax(0, auto);
}

@utility grid-auto-fr {
  @apply grid-scaffold;
  grid-template-columns: minmax(0, auto) repeat(
      calc(max(var(--cols) - 1, 1)),
      minmax(0, 1fr)
    );
}

@utility grid-with-breakout {
  & {
    display: grid;
    grid-template-columns:
      minmax(0, var(--start-width, var(--side-width, 0.25fr)))
      minmax(0, var(--content-width, 1fr))
      minmax(0, var(--end-width, var(--side-width, 0.25fr)));
    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));

    > * {
      grid-column: 2 / -2;
    }

    > .breakout-small {
      grid-column: auto / span 1;
    }

    > .breakout-start-only,
    > .breakout-left-only {
      grid-column: 1 / 2;
    }

    > .breakout-start,
    > .breakout-left {
      grid-column: 1 / -2;
    }

    > .breakout-end,
    > .breakout-right {
      grid-column: 2 / -1;
    }

    > .breakout-end-only,
    > .breakout-right-only {
      grid-column: -1 / -2;
    }

    > .breakout-full {
      grid-column: 1 / -1;
    }
  }
}

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

@utility grid-gallery-fit {
  @apply grid-gallery;
  --fit: auto-fit;
}

@utility grid-gallery-fill {
  @apply grid-gallery;
  --fit: auto-fill;
}

/*********************
 * Useful grid utilities *
 *********************/
@utility dense {
  grid-auto-flow: dense;
}

@utility dense-column {
  grid-auto-columns: dense;
}

@utility dense-row {
  grid-auto-rows: dense;
}

/*********************
 * Two Column Alternate Grid *
 *********************/

@utility grid-alternate {
  & {
    &[data-start='left'] {
      :where(& ~ .grid-alternate:nth-child(even)) .right-col {
        order: -1;
      }
    }

    &[data-start='right'] {
      :where(&, & ~ .grid-alternate:nth-child(odd)) .right-col {
        order: -1;
      }
    }
  }
}