.container {
  inline-size: var(--container-inline);
  margin-inline: auto;
}

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

.section--compact {
  padding-block: var(--space-6);
}

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

.stack--large {
  gap: var(--space-6);
}

.cluster {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.grid--compact {
  gap: var(--space-4);
}

.split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.flow > * + * {
  margin-block-start: var(--space-4);
}

@media (min-width: 480px) and (max-width: 767px) {
  .grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-8);
  }

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

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

  .split {
    align-items: start;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

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