.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

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

.section--soft {
  background: hsl(var(--background-soft));
  border-block: 1px solid hsl(var(--border) / 0.6);
}

.section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 44rem;
  margin: 0 auto var(--space-12);
  text-align: center;
}

.section__title {
  font-size: var(--text-3xl);
}

.section__lead {
  color: hsl(var(--muted-foreground));
  font-size: var(--text-lg);
}

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

.grid--2 {
  grid-template-columns: minmax(0, 1fr);
}

.grid--3 {
  grid-template-columns: minmax(0, 1fr);
}

.grid--4 {
  grid-template-columns: minmax(0, 1fr);
}

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

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}