/* Containers, section rhythm and grids. Mobile-first; breakpoints 600 / 900 / 1200px. */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--s-6);
}

.section--tint {
  background: var(--teal-pale);
}

.section--card {
  background: var(--card);
  border-block: 1px solid var(--mist);
}

.section--dark {
  background: var(--ink);
  color: var(--text-on-dark);
}

.section--dark h2,
.section--dark h3 {
  color: var(--heading-on-dark);
}

.section__head {
  margin-bottom: var(--s-5);
}

.section__head p {
  font-size: var(--fs-lead);
}

.eyebrow {
  display: block;
  margin: 0 0 var(--s-2);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal-deep);
}

.section--dark .eyebrow,
.hero .eyebrow {
  color: var(--amber);
}

.grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  padding: 0;
  margin: 0;
  list-style: none;
}

.stack > * + * {
  margin-top: var(--s-4);
}

.split {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 600px) {
  :root {
    --gutter: 1.5rem;
  }

  .grid--2,
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  :root {
    --gutter: 2rem;
  }

  .section {
    padding-block: var(--s-7);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--s-6);
    align-items: start;
  }

  .split--form {
    grid-template-columns: 1.4fr 0.8fr;
  }
}

@media (min-width: 1200px) {
  .section {
    padding-block: var(--s-8);
  }
}