.site-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.site-main {
  flex: 1 0 auto;
}

.container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-space);
}

.section--compact {
  padding-block: var(--section-space-compact);
}

.section--white {
  background: var(--white);
}

.section--main {
  background: var(--bg-main);
}

.section--blue {
  background: var(--bg-blue);
}

.section--brand {
  color: var(--white);
  background: var(--brand);
}

.section__head {
  max-width: 48.75rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.section__title {
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-700);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-medium);
  color: var(--text-dark);
}

.section__subtitle {
  margin-top: var(--space-12);
  font-size: clamp(1rem, 2vw, 1.0625rem);
  line-height: var(--lh-relaxed);
  color: var(--text-gray);
}

.section__title + .section__subtitle {
  margin-top: var(--space-12);
}

.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-24));
}

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-16));
}

.l-grid {
  display: grid;
  gap: var(--grid-gap);
}

.l-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.l-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.l-grid--12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.l-grid > * {
  min-width: 0;
}

@media (max-width: 64rem) {
  .section__head {
    max-width: 42rem;
  }
}

@media (max-width: 47.99875rem) {
  .section {
    padding-block: clamp(3rem, 8vw, 3.5rem);
  }

  .section__head {
    margin-bottom: var(--space-32);
  }

  .section__subtitle {
    margin-top: var(--space-10);
    font-size: var(--fs-16);
  }

  .l-grid--2,
  .l-grid--3,
  .l-grid--4 {
    grid-template-columns: 1fr;
  }
}