.container {
  width: min(100% - 2 * var(--space-lg), var(--container));
  margin-inline: auto;
}

.container--narrow { max-width: 820px; }

.section { padding-block: var(--space-3xl); }
.section--alt { background: var(--color-bg-alt); }
.section--brand { background: var(--color-green-700); color: var(--color-white); }
.section--brand h2, .section--brand h3 { color: var(--color-white); }

.section-title { text-align: center; margin-bottom: var(--space-2xl); }

.split {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.grid-2 { display: grid; gap: var(--space-lg); }

@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
  .split--top { align-items: start; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}