@layer components {
  .gv2-grid {
    display: grid;
    grid-template-columns: repeat(var(--gv2-grid-columns, 12), minmax(0, 1fr));
    gap: var(--gv2-grid-gap, var(--gv2-space-4));
    min-inline-size: 0;
  }

  .gv2-grid__full {
    grid-column: 1 / -1;
  }

  .gv2-grid__half {
    grid-column: span 6;
    min-inline-size: 0;
  }

  .gv2-auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--gv2-grid-gap, var(--gv2-space-4));
  }

  @container gv2-shell (max-width: 40rem) {
    .gv2-grid__half {
      grid-column: 1 / -1;
    }
  }
}