@utility subgrid-scaffold {
  display: grid;
  gap: inherit;
}

@utility subgrid {
  @apply subgrid-columns;
  @apply subgrid-rows;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

@utility subgrid-columns {
  @apply subgrid-scaffold;
  grid-column: var(--colstart, auto) / span var(--span, 1);
  grid-template-columns: subgrid;

  > *:not([class*='subgrid']) {
    grid-column-end: span var(--span, 1);
    max-width: 100%;
  }
}

@utility subgrid-rows {
  @apply subgrid-scaffold;
  grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
  grid-template-rows: subgrid;

  > *:not([class*='subgrid']) {
    grid-row-end: span var(--rowspan, 1);
  }
}