:root {
  /*
   * Gemeinsame Größenbasis für die großzügigen Gecko-Seiten.
   * Komponenten wählen nur noch eine Rolle, statt eigene Zwischenwerte zu erfinden.
   */
  --gecko-large-shell: 1400px;
  --gecko-large-gutter: clamp(20px, 3vw, 48px);
  --gecko-large-section-y: clamp(76px, 8vw, 124px);

  --gecko-type-display: clamp(3.25rem, 5.2vw, 5.25rem);
  --gecko-type-section: clamp(2.5rem, 4.7vw, 4.8rem);
  --gecko-type-card-large: clamp(1.9rem, 3vw, 3rem);
  --gecko-type-card: clamp(1.55rem, 2.15vw, 2.05rem);
  --gecko-type-lead: clamp(1.08rem, 1.45vw, 1.3rem);
  --gecko-type-body: clamp(1rem, 1.05vw, 1.125rem);
  --gecko-type-meta: 0.9rem;
}

@media (max-width: 640px) {
  :root {
    --gecko-large-gutter: 20px;
    --gecko-large-section-y: 72px;

    --gecko-type-display: clamp(2.45rem, 12vw, 3.6rem);
    --gecko-type-section: clamp(2rem, 9vw, 2.7rem);
    --gecko-type-card-large: clamp(1.7rem, 7.4vw, 2.25rem);
    --gecko-type-card: clamp(1.35rem, 6vw, 1.7rem);
    --gecko-type-lead: 1.05rem;
    --gecko-type-body: 1rem;
    --gecko-type-meta: 0.82rem;
  }
}