.container {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}

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

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

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

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

@media (min-width: 48rem) {
  .span-content {
    grid-column: 2 / -2;
  }
}

@media (min-width: 64rem) {
  .span-content {
    grid-column: 3 / -3;
  }
}