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

.container--narrow {
  width: min(100% - 2rem, var(--container-narrow));
  margin-inline: auto;
}

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section--alt {
  background: var(--color-bg-alt);
}

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

.grid--2,
.grid--3 {
  grid-template-columns: 1fr;
}

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

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

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