section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 4rem) var(--space);
}

section h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 0.5rem;
  color: var(--color-dark);
}

.section-lead {
  color: var(--color-muted);
  margin: 0 0 1.75rem;
  max-width: 50ch;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .cards.three { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }

.card-body { padding: 1.25rem; }

.card h3 { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--color-dark); }

.card p { margin: 0; font-size: 0.9375rem; color: var(--color-muted); }

.split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
}

.split img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}