/* Gaga design system v1 (@gaga/design-system), vendored from the jobs design handoff.
   Unchanged except that the Google Fonts @import is removed: pages load Poppins with <link>.
   Do not edit in place; add a new version instead. */
/* Gaga design system — componentstijlen
   Neumorfisme is het dragende principe: vlakken staan op of liggen verzonken, nooit plat.

   ARCHITECTUUR — lees dit voor je iets wijzigt.
   Geen enkel component kent zijn eigen kleur. Elk vlak leest zijn achtergrond, tekstkleur
   en schaduw uit contextvariabelen die de omhullende sectie zet (.gaga-tone-light of
   .gaga-tone-dark). Daardoor is "donker vlak op lichte achtergrond" structureel
   onmogelijk in plaats van alleen afgeraden. Voeg nooit een --light/--dark modifier
   toe aan een component; zet de tone op de sectie. */


/* Tokens worden hier herhaald zodat de componentstijlen altijd werken,
   ook als tokens.css los geladen wordt. Identieke waarden, dus conflictvrij. */
:root {
  --gaga-ink: #1d1814;
  --gaga-paper: #f8f8f8;
  --gaga-white: #ffffff;
  --gaga-teal: #15a18c;
  --gaga-terracotta: #a55222;
  --gaga-olive: #212600;
  --gaga-line: #e6e6e6;
  --gaga-mute: #a3a3a3;
  --gaga-muted-text: #606060;
  --gaga-neu-light-shade: #e2e2e2;
  --gaga-neu-light-glow: #ffffff;
  --gaga-neu-dark-shade: #13100d;
  --gaga-neu-dark-glow: #211b17;
  --gaga-neu-light-raised: 7px 7px 14px var(--gaga-neu-light-shade),
    -7px -7px 14px var(--gaga-neu-light-glow);
  --gaga-neu-light-inset: inset 5px 5px 10px var(--gaga-neu-light-shade),
    inset -5px -5px 10px var(--gaga-neu-light-glow);
  --gaga-neu-dark-raised: -5px 5px 10px var(--gaga-neu-dark-shade),
    5px -5px 10px var(--gaga-neu-dark-glow);
  --gaga-neu-dark-inset: inset -5px 5px 10px var(--gaga-neu-dark-shade),
    inset 5px -5px 10px var(--gaga-neu-dark-glow);
  --gaga-neu-reach-light: 21px;
  --gaga-neu-reach-dark: 15px;
  --gaga-neu-clearance: 24px;
  --gaga-gap-sm: max(var(--gaga-neu-clearance), 1.5rem);
  --gaga-gap-md: max(var(--gaga-neu-clearance), 2rem);
  --gaga-gap-lg: max(var(--gaga-neu-clearance), 3rem);
  --gaga-gap-xl: max(var(--gaga-neu-clearance), 4.5rem);
  --gaga-width-narrow: 46rem;
  --gaga-width-content: 80rem;
  --gaga-width-wide: 100rem;
  --gaga-radius-neu: 42px;
  --gaga-radius-card: 24px;
  --gaga-radius-input: 8px;
  --gaga-radius-pill: 999px;
  --gaga-font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gaga-text-display: clamp(3.5rem, 8vw, 7.5rem);
  --gaga-text-h1: clamp(2.75rem, 6vw, 5rem);
  --gaga-text-h2: clamp(2rem, 4vw, 3.25rem);
  --gaga-text-h3: clamp(1.375rem, 2.2vw, 1.75rem);
  --gaga-text-lead: clamp(1.25rem, 1.8vw, 1.5rem);
  --gaga-text-body: 1.0625rem;
  --gaga-text-small: 0.9375rem;
  --gaga-text-eyebrow: 0.8125rem;
  --gaga-weight-display: 900;
  --gaga-weight-heading: 700;
  --gaga-weight-strong: 600;
  --gaga-weight-medium: 500;
  --gaga-weight-body: 300;
  --gaga-leading-tight: 1.02;
  --gaga-leading-snug: 1.15;
  --gaga-leading-body: 1.7;
  --gaga-tracking-tight: -0.03em;
  --gaga-tracking-eyebrow: 0.18em;
  --gaga-space-xs: 0.5rem;
  --gaga-space-sm: 0.75rem;
  --gaga-space-md: 1.25rem;
  --gaga-space-lg: 2rem;
  --gaga-space-xl: 3rem;
  --gaga-space-2xl: 4.5rem;
  --gaga-space-3xl: 7rem;
}

/* ============================================================
   Tone — de enige plek waar licht/donker beslist wordt
   ============================================================ */

/* Lichte tone is ook de fallback op :root, zodat een los component
   buiten een sectie niet ongestyled is. */
:root,
.gaga-tone-light {
  --gaga-bg: var(--gaga-paper);
  --gaga-fg: var(--gaga-ink);
  --gaga-fg-muted: var(--gaga-muted-text);
  --gaga-neu-raised: var(--gaga-neu-light-raised);
  --gaga-neu-inset: var(--gaga-neu-light-inset);
  --gaga-btn-primary-bg: var(--gaga-ink);
  --gaga-btn-primary-fg: var(--gaga-white);
  --gaga-input-bg: var(--gaga-white);
  --gaga-input-border: var(--gaga-line);
  --gaga-logo-color: var(--gaga-terracotta);
}

.gaga-tone-dark {
  --gaga-bg: var(--gaga-ink);
  --gaga-fg: var(--gaga-white);
  --gaga-fg-muted: var(--gaga-mute);
  --gaga-neu-raised: var(--gaga-neu-dark-raised);
  --gaga-neu-inset: var(--gaga-neu-dark-inset);
  --gaga-btn-primary-bg: var(--gaga-white);
  --gaga-btn-primary-fg: var(--gaga-ink);
  --gaga-input-bg: var(--gaga-ink);
  --gaga-input-border: var(--gaga-muted-text);
  --gaga-logo-color: var(--gaga-white);
}

.gaga-tone-light,
.gaga-tone-dark {
  background: var(--gaga-bg);
  color: var(--gaga-fg);
}

/* ============================================================
   Basis
   ============================================================ */

.gaga-canvas,
.gaga-canvas *,
.gaga-canvas *::before,
.gaga-canvas *::after,
.gaga-section,
.gaga-section *,
.gaga-slide,
.gaga-slide *,
.gaga-stack,
.gaga-stack * {
  box-sizing: border-box;
}

/* ============================================================
   Canvas — paginafond
   ============================================================ */

.gaga-canvas {
  font-family: var(--gaga-font-sans);
  /* Nooit krapper dan de schaduwreikwijdte, anders kapt de schaduw af tegen de rand. */
  padding: max(var(--gaga-space-xl), var(--gaga-neu-clearance));
  overflow: visible;
}

/* ============================================================
   Section — volle-breedte band met een eigen tone
   Dit is de enige manier om een donkere strook te maken: de achtergrond
   loopt door tot de rand en alles erbinnen wordt automatisch donker.
   ============================================================ */

.gaga-section {
  font-family: var(--gaga-font-sans);
  width: 100%;
  padding-block: var(--gaga-space-3xl);
  padding-inline: max(var(--gaga-space-xl), var(--gaga-neu-clearance));
}

.gaga-section--pad-sm {
  padding-block: var(--gaga-space-xl);
}
.gaga-section--pad-lg {
  padding-block: calc(var(--gaga-space-3xl) * 1.5);
}
.gaga-section--pad-none {
  padding-block: 0;
}

.gaga-section__inner {
  margin-inline: auto;
  width: 100%;
}

.gaga-section--narrow .gaga-section__inner {
  max-width: var(--gaga-width-narrow);
}
.gaga-section--content .gaga-section__inner {
  max-width: var(--gaga-width-content);
}
.gaga-section--wide .gaga-section__inner {
  max-width: var(--gaga-width-wide);
}
.gaga-section--full .gaga-section__inner {
  max-width: none;
}

/* ============================================================
   Surface — de neumorfische primitief
   ============================================================ */

.gaga-surface {
  font-family: var(--gaga-font-sans);
  border-radius: var(--gaga-radius-neu);
  border: 0;
  display: block;
  background: var(--gaga-bg);
  color: var(--gaga-fg);
}

.gaga-surface--raised {
  box-shadow: var(--gaga-neu-raised);
}
.gaga-surface--inset {
  box-shadow: var(--gaga-neu-inset);
}

.gaga-surface--pad-none {
  padding: 0;
}
.gaga-surface--pad-sm {
  padding: var(--gaga-space-md);
}
.gaga-surface--pad-md {
  padding: var(--gaga-space-lg);
}
.gaga-surface--pad-lg {
  padding: var(--gaga-space-xl);
}

/* ============================================================
   Logo
   ============================================================ */

.gaga-logo {
  display: block;
  color: var(--gaga-logo-color);
}

.gaga-logo--brand {
  color: var(--gaga-terracotta);
}
.gaga-logo--light {
  color: var(--gaga-white);
}
.gaga-logo--ink {
  color: var(--gaga-ink);
}

/* ============================================================
   Eyebrow — bovenlabel
   ============================================================ */

.gaga-eyebrow {
  font-family: var(--gaga-font-sans);
  /* Klantnamen als KINDERRECHTENCOMMISSARIAAT zijn één lang woord; zonder dit
     lopen ze buiten hun kaart. */
  overflow-wrap: anywhere;
  font-size: var(--gaga-text-eyebrow);
  font-weight: var(--gaga-weight-medium);
  letter-spacing: var(--gaga-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gaga-fg-muted);
  margin: 0;
  display: block;
}

.gaga-eyebrow--teal {
  color: var(--gaga-teal);
}
.gaga-eyebrow--terracotta {
  color: var(--gaga-terracotta);
}

/* ============================================================
   Heading — groot en stellig
   ============================================================ */

.gaga-heading {
  font-family: var(--gaga-font-sans);
  color: var(--gaga-fg);
  margin: 0;
  text-wrap: balance;
}

.gaga-heading--display {
  font-size: var(--gaga-text-display);
  font-weight: var(--gaga-weight-display);
  line-height: var(--gaga-leading-tight);
  letter-spacing: var(--gaga-tracking-tight);
}
.gaga-heading--h1 {
  font-size: var(--gaga-text-h1);
  font-weight: var(--gaga-weight-display);
  line-height: var(--gaga-leading-tight);
  letter-spacing: var(--gaga-tracking-tight);
}
.gaga-heading--h2 {
  font-size: var(--gaga-text-h2);
  font-weight: var(--gaga-weight-heading);
  line-height: var(--gaga-leading-snug);
  letter-spacing: var(--gaga-tracking-tight);
}
.gaga-heading--h3 {
  font-size: var(--gaga-text-h3);
  font-weight: var(--gaga-weight-strong);
  line-height: var(--gaga-leading-snug);
  letter-spacing: -0.015em;
}

/* ============================================================
   Text — lopende tekst, altijd light
   ============================================================ */

.gaga-text {
  font-family: var(--gaga-font-sans);
  font-weight: var(--gaga-weight-body);
  line-height: var(--gaga-leading-body);
  color: var(--gaga-fg);
  margin: 0;
  max-width: var(--gaga-width-narrow);
}

.gaga-text--lead {
  font-size: var(--gaga-text-lead);
}
.gaga-text--body {
  font-size: var(--gaga-text-body);
}
.gaga-text--small {
  font-size: var(--gaga-text-small);
}

.gaga-text--muted {
  color: var(--gaga-fg-muted);
}

.gaga-text--full {
  max-width: none;
}

/* ============================================================
   Button
   ============================================================ */

.gaga-btn {
  font-family: var(--gaga-font-sans);
  font-size: var(--gaga-text-body);
  font-weight: var(--gaga-weight-strong);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--gaga-space-sm);
  padding: 1rem var(--gaga-space-lg);
  border-radius: var(--gaga-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.gaga-btn--lg {
  font-size: 1.125rem;
  padding: 1.25rem var(--gaga-space-xl);
}

.gaga-btn--primary {
  background: var(--gaga-btn-primary-bg);
  color: var(--gaga-btn-primary-fg);
}
.gaga-btn--primary:hover {
  opacity: 0.88;
}

.gaga-btn--secondary {
  background: transparent;
  color: var(--gaga-fg);
  border-color: currentColor;
}
.gaga-btn--secondary:hover {
  background: var(--gaga-btn-primary-bg);
  color: var(--gaga-btn-primary-fg);
}

.gaga-btn--accent {
  background: var(--gaga-teal);
  color: var(--gaga-white);
  border-radius: var(--gaga-radius-input);
}
.gaga-btn--accent:hover {
  opacity: 0.9;
}

/* Neumorfische knop — kiest zijn schaduw uit de tone van de sectie */
.gaga-btn--neumorph {
  background: var(--gaga-bg);
  color: var(--gaga-fg);
  box-shadow: var(--gaga-neu-raised);
}
.gaga-btn--neumorph:active {
  box-shadow: var(--gaga-neu-inset);
}

.gaga-btn:disabled,
.gaga-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.gaga-btn__arrow {
  font-size: 1.125em;
  line-height: 1;
  display: inline-block;
}

/* ============================================================
   Card
   ============================================================ */

.gaga-card {
  font-family: var(--gaga-font-sans);
  border-radius: var(--gaga-radius-neu);
  padding: var(--gaga-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--gaga-space-md);
  background: var(--gaga-bg);
  color: var(--gaga-fg);
  box-shadow: var(--gaga-neu-raised);
}

.gaga-card__title {
  font-size: var(--gaga-text-h3);
  font-weight: var(--gaga-weight-heading);
  line-height: var(--gaga-leading-snug);
  letter-spacing: var(--gaga-tracking-tight);
  margin: 0;
}

.gaga-card__body {
  font-size: var(--gaga-text-body);
  font-weight: var(--gaga-weight-body);
  line-height: var(--gaga-leading-body);
  color: var(--gaga-fg-muted);
  margin: 0;
}

.gaga-card__footer {
  margin-top: var(--gaga-space-xs);
}

/* ============================================================
   StatBlock — groot bewijscijfer
   ============================================================ */

.gaga-stat {
  font-family: var(--gaga-font-sans);
  border-radius: var(--gaga-radius-neu);
  padding: var(--gaga-space-2xl) var(--gaga-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--gaga-space-xs);
  text-align: left;
  background: var(--gaga-bg);
  color: var(--gaga-fg);
  box-shadow: var(--gaga-neu-raised);
}

.gaga-stat__value {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: var(--gaga-weight-display);
  line-height: 1;
  letter-spacing: var(--gaga-tracking-tight);
  margin: 0;
}

.gaga-stat--teal .gaga-stat__value {
  color: var(--gaga-teal);
}
.gaga-stat--terracotta .gaga-stat__value {
  color: var(--gaga-terracotta);
}

.gaga-stat__label {
  font-size: var(--gaga-text-eyebrow);
  font-weight: var(--gaga-weight-medium);
  letter-spacing: var(--gaga-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gaga-fg-muted);
  margin: 0;
}

.gaga-stat__description {
  font-size: var(--gaga-text-small);
  font-weight: var(--gaga-weight-body);
  line-height: var(--gaga-leading-body);
  color: var(--gaga-fg-muted);
  margin: var(--gaga-space-xs) 0 0;
}

/* ============================================================
   Step — genummerde stap (01 / 02 / 03)
   ============================================================ */

.gaga-step {
  font-family: var(--gaga-font-sans);
  border-radius: var(--gaga-radius-neu);
  padding: var(--gaga-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--gaga-space-sm);
  background: var(--gaga-bg);
  color: var(--gaga-fg);
  box-shadow: var(--gaga-neu-raised);
}

.gaga-step__number {
  font-size: var(--gaga-text-small);
  font-weight: var(--gaga-weight-heading);
  letter-spacing: var(--gaga-tracking-eyebrow);
  color: var(--gaga-teal);
  margin: 0;
}

.gaga-step__title {
  font-size: var(--gaga-text-h3);
  font-weight: var(--gaga-weight-heading);
  line-height: var(--gaga-leading-snug);
  letter-spacing: var(--gaga-tracking-tight);
  margin: 0;
}

.gaga-step__body {
  font-size: var(--gaga-text-body);
  font-weight: var(--gaga-weight-body);
  line-height: var(--gaga-leading-body);
  color: var(--gaga-fg-muted);
  margin: 0;
}

/* ============================================================
   QuoteTile — grote uitspraak, ook voor social
   ============================================================ */

.gaga-quote {
  font-family: var(--gaga-font-sans);
  border-radius: var(--gaga-radius-neu);
  padding: var(--gaga-space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--gaga-space-md);
  justify-content: center;
  margin: 0;
  width: 100%;
  background: var(--gaga-bg);
  color: var(--gaga-fg);
  box-shadow: var(--gaga-neu-inset);
}

.gaga-quote--square {
  aspect-ratio: 1 / 1;
}
.gaga-quote--portrait {
  aspect-ratio: 4 / 5;
}

.gaga-quote__text {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: var(--gaga-weight-heading);
  line-height: var(--gaga-leading-snug);
  letter-spacing: var(--gaga-tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.gaga-quote__attribution {
  font-size: var(--gaga-text-small);
  font-weight: var(--gaga-weight-body);
  color: var(--gaga-fg-muted);
  margin: 0;
}

/* ============================================================
   Testimonial
   ============================================================ */

.gaga-testimonial {
  font-family: var(--gaga-font-sans);
  border-radius: var(--gaga-radius-neu);
  padding: var(--gaga-space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--gaga-space-lg);
  margin: 0;
  background: var(--gaga-bg);
  color: var(--gaga-fg);
  box-shadow: var(--gaga-neu-raised);
}

.gaga-testimonial__quote {
  font-size: var(--gaga-text-h3);
  font-weight: var(--gaga-weight-strong);
  line-height: var(--gaga-leading-snug);
  letter-spacing: var(--gaga-tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.gaga-testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
}

.gaga-testimonial__name {
  font-size: var(--gaga-text-small);
  font-weight: var(--gaga-weight-strong);
}

.gaga-testimonial__role {
  font-size: var(--gaga-text-small);
  font-weight: var(--gaga-weight-body);
  color: var(--gaga-fg-muted);
}

/* ============================================================
   NewsletterBlock
   ============================================================ */

.gaga-newsletter {
  font-family: var(--gaga-font-sans);
  border-radius: var(--gaga-radius-neu);
  padding: var(--gaga-space-3xl) var(--gaga-space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gaga-space-md);
  background: var(--gaga-bg);
  color: var(--gaga-fg);
  box-shadow: var(--gaga-neu-raised);
}

.gaga-newsletter__title {
  font-size: var(--gaga-text-h2);
  font-weight: var(--gaga-weight-heading);
  line-height: var(--gaga-leading-snug);
  letter-spacing: var(--gaga-tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.gaga-newsletter__subtitle {
  font-size: var(--gaga-text-lead);
  font-weight: var(--gaga-weight-body);
  line-height: var(--gaga-leading-body);
  color: var(--gaga-fg-muted);
  margin: 0;
}

.gaga-newsletter__form {
  display: flex;
  gap: var(--gaga-space-sm);
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 36rem;
  margin-top: var(--gaga-space-sm);
}

.gaga-newsletter__input {
  flex: 1 1 16rem;
  font-family: var(--gaga-font-sans);
  font-size: var(--gaga-text-body);
  font-weight: var(--gaga-weight-body);
  padding: 1rem var(--gaga-space-md);
  border-radius: var(--gaga-radius-input);
  border: 1px solid var(--gaga-input-border);
  background: var(--gaga-input-bg);
  color: var(--gaga-fg);
}

.gaga-newsletter__input::placeholder {
  color: var(--gaga-mute);
}

.gaga-newsletter__fineprint {
  font-size: var(--gaga-text-small);
  font-weight: var(--gaga-weight-body);
  font-style: italic;
  color: var(--gaga-fg-muted);
  margin: 0;
}

/* ============================================================
   Slide — 16:9 frame voor decks
   Schaalt mee met zijn eigen breedte via container queries.
   ============================================================ */

.gaga-slide {
  container-type: inline-size;
  font-family: var(--gaga-font-sans);
  aspect-ratio: 16 / 9;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: max(2cqw, var(--gaga-gap-sm));
  padding: max(6cqw, var(--gaga-gap-lg));
  overflow: hidden;
  border-radius: var(--gaga-radius-card);
}

.gaga-slide__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: max(2cqw, var(--gaga-gap-sm));
}

.gaga-slide--top .gaga-slide__body {
  justify-content: flex-start;
}
.gaga-slide--center .gaga-slide__body {
  justify-content: center;
}
.gaga-slide--bottom .gaga-slide__body {
  justify-content: flex-end;
}

.gaga-slide__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  flex-shrink: 0;
}

.gaga-slide__number {
  font-size: 1.5cqw;
  font-weight: var(--gaga-weight-medium);
  letter-spacing: var(--gaga-tracking-eyebrow);
  color: var(--gaga-fg-muted);
  margin: 0;
}

/* Typografie binnen een slide schaalt op de slidebreedte, niet op het scherm. */
.gaga-slide .gaga-heading--display {
  font-size: 8cqw;
}
.gaga-slide .gaga-heading--h1 {
  font-size: 6cqw;
}
.gaga-slide .gaga-heading--h2 {
  font-size: 4.5cqw;
}
.gaga-slide .gaga-heading--h3 {
  font-size: 2.6cqw;
}
.gaga-slide .gaga-eyebrow {
  font-size: 1.5cqw;
}
.gaga-slide .gaga-stat__value {
  font-size: 7cqw;
}
.gaga-slide .gaga-stat__label,
.gaga-slide .gaga-step__number {
  font-size: 1.4cqw;
}
.gaga-slide .gaga-card__title,
.gaga-slide .gaga-step__title,
.gaga-slide .gaga-testimonial__quote {
  font-size: 2.4cqw;
}
.gaga-slide .gaga-text,
.gaga-slide .gaga-card__body,
.gaga-slide .gaga-step__body,
.gaga-slide .gaga-stat__description {
  font-size: 1.7cqw;
}
.gaga-slide .gaga-step,
.gaga-slide .gaga-card,
.gaga-slide .gaga-stat,
.gaga-slide .gaga-testimonial {
  padding: max(3cqw, var(--gaga-space-md));
  border-radius: max(3cqw, var(--gaga-radius-card));
  gap: 1cqw;
}
.gaga-slide .gaga-btn {
  font-size: 1.7cqw;
  padding: 1.6cqw 3cqw;
  gap: 1cqw;
}

/* ============================================================
   Stack — layout met gegarandeerde ademruimte
   Elke gap is geklemd op --gaga-neu-clearance (24px).
   ============================================================ */

.gaga-stack {
  font-family: var(--gaga-font-sans);
  display: flex;
}

.gaga-stack--column {
  flex-direction: column;
}
.gaga-stack--row {
  flex-direction: row;
}
.gaga-stack--wrap {
  flex-wrap: wrap;
}
.gaga-stack--grid {
  display: grid;
}

.gaga-stack--gap-sm {
  gap: var(--gaga-gap-sm);
}
.gaga-stack--gap-md {
  gap: var(--gaga-gap-md);
}
.gaga-stack--gap-lg {
  gap: var(--gaga-gap-lg);
}
.gaga-stack--gap-xl {
  gap: var(--gaga-gap-xl);
}

/* Binnen een slide schaalt de gap mee, maar nooit onder de clearance. */
.gaga-slide .gaga-stack--gap-sm {
  gap: max(2cqw, var(--gaga-gap-sm));
}
.gaga-slide .gaga-stack--gap-md {
  gap: max(3cqw, var(--gaga-gap-md));
}
.gaga-slide .gaga-stack--gap-lg {
  gap: max(4cqw, var(--gaga-gap-lg));
}
.gaga-slide .gaga-stack--gap-xl {
  gap: max(6cqw, var(--gaga-gap-xl));
}