.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
  position: relative;
}

.section--tight { padding-block: clamp(48px, 4vw + 24px, 96px); }

.split-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 64px);
}
@media (min-width: 880px) {
  .split-2 { grid-template-columns: 1fr 1fr; }
  .split-2.asym { grid-template-columns: 5fr 7fr; }
  .split-2.asym-rev { grid-template-columns: 7fr 5fr; }
}

.split-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 2.5vw, 40px);
}
@media (min-width: 760px) { .split-3 { grid-template-columns: repeat(3, 1fr); } }

.split-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2vw, 32px);
}
@media (min-width: 640px) { .split-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .split-4 { grid-template-columns: repeat(4, 1fr); } }

/* Bento grid */
.bento {
  display: grid;
  gap: clamp(12px, 1.2vw, 18px);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
}
.bento-cell { grid-column: span 6; grid-row: span 1; }
@media (min-width: 760px) {
  .bento-cell { grid-column: span 3; grid-row: span 1; }
  .bento-cell--wide  { grid-column: span 6; grid-row: span 1; }
  .bento-cell--tall  { grid-row: span 2; }
  .bento-cell--xl    { grid-column: span 6; grid-row: span 1; }
}
@media (min-width: 1080px) {
  .bento-cell           { grid-column: span 2; }
  .bento-cell--wide     { grid-column: span 4; }
  .bento-cell--xl       { grid-column: span 4; grid-row: span 2; }
  .bento-cell--vstrip   { grid-column: span 2; grid-row: span 2; }
}

/* Section headers */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: clamp(40px, 4vw, 72px);
}
@media (min-width: 880px) {
  .sec-head { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}
.sec-head__title { font-size: var(--text-3xl); }
.sec-head__lede { color: var(--text-md); }

.section-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-hi), transparent);
  margin: 0;
}