.grid {
  --content-max-width: 80rem;
  --content-wider-2-width: 7rem;
  --content-wide-1-width: 2rem;

  --grid-gap: clamp(1rem, 6vw, 3rem);

  --standard: min(var(--content-max-width), 100% - var(--grid-gap) * 2);
  --wide-1: minmax(0, var(--content-wide-1-width));
  --wide-2: minmax(0, var(--content-wider-2-width));
  --full: minmax(var(--grid-gap), 1fr);

  display: grid;
  grid-template-columns:
    [full-start] var(--full) [wide-2-start] var(--wide-2) [wide-1-start] var(--wide-1) [standard-start] var(--standard) [standard-end] var(--wide-1) [wide-1-end] var(--wide-2) [wide-2-end] var(--full) [full-end];
  flex: 1;
  align-content: start;
}

.grid>* {
  grid-column: standard;
}

/* Container-driven vertical rhythm: the container declares one gap and the
   children carry no vertical margins. Gap composes with
   `margin-block-start: auto` pinning (no padding compensation needed) and
   can't be silently overridden by a child's own margin. Vary rhythm with a
   gap-* modifier, or nest sub-stacks for groups that need a different gap. */
.stack {
  display: flex;
  flex-direction: column;
}

.center {
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
}

/* Rhythm modifiers, e.g. class="stack gap-m". Add sizes as they get used. */
.gap-3xs     { gap: var(--space-3xs); }
.gap-2xs     { gap: var(--space-2xs); }
.gap-xs      { gap: var(--space-xs); }
.gap-s       { gap: var(--space-s); }
.gap-s-5xl   { gap: var(--space-s-5xl); }
.gap-m       { gap: var(--space-m); }
.gap-l       { gap: var(--space-l); }
.gap-l-5xl   { gap: var(--space-l-5xl); }
.gap-xl      { gap: var(--space-xl); }
.gap-xl-6xl  { gap: var(--space-xl-6xl); }
.gap-2xl     { gap: var(--space-2xl); }
.gap-2xl-5xl { gap: var(--space-2xl-5xl); }
.gap-3xl     { gap: var(--space-3xl); }
.gap-4xl     { gap: var(--space-4xl); }
.gap-4xl-6xl { gap: var(--space-4xl-6xl); }
.gap-5xl     { gap: var(--space-5xl); }
.gap-6xl     { gap: var(--space-6xl); }

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.scroll-y {
  overflow-y: auto;
  scrollbar-width: thin;
}

.scroll-y::-webkit-scrollbar {
  width: var(--space-2xs);
  height: var(--space-2xs);
}

.scroll-y::-webkit-scrollbar-track {
  background: var(--color-neutral-10);
}

.scroll-y::-webkit-scrollbar-thumb {
  background: var(--color-neutral-7);
  border-radius: var(--space-m);
}

.scroll-y::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-6);
}