.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--p8); }
.section--soft { background: var(--p7); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4) var(--s6); margin-bottom: var(--s7); }
.section-head > div { display: flex; flex-direction: column; gap: var(--s3); max-width: 40em; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s6); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .grid-3, .grid-2, .split { grid-template-columns: minmax(0, 1fr); }
  .section-head { margin-bottom: var(--s6); }
}