/* Layout primitives: container, grid, section base and surface variants */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--space-md));
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.container--form {
  --container: 440px;
}
@media (min-width: 768px) {
  .container {
    max-width: calc(var(--container) + 2 * var(--space-lg));
    padding: 0 var(--space-lg);
  }
}

/* --ground is the section's own paper; --surface is the ground of tiles sitting on it. */
section {
  --ground: var(--color-paper);
  --surface: var(--color-surface);
  padding: var(--space-xl) 0;
}
@media (min-width: 768px) {
  section {
    padding: var(--space-section) 0;
  }
}
.section--soft {
  --ground: var(--color-surface);
  --surface: var(--color-paper);
  background: var(--color-surface);
}

.flow > * + * {
  margin-top: var(--space-md);
}
.flow--section > * + * {
  margin-top: var(--space-xl);
}

/* Offset in-page anchor targets below the sticky nav */
:target {
  scroll-margin-top: 80px;
}

.grid {
  list-style: none;
  display: grid;
  gap: var(--space-md);
}
.grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}