/* ── Containers ─────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
}

.container--narrow {
  max-width: 48rem;
}

.container--form {
  max-width: 36rem;
}

/* ── Grids ──────────────────────────────────────────────────────────── */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

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

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

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

/* ── Spacing ───────────────────────────────────────────────────────── */

.stack > * + * { margin-top: 1.25rem; }
.stack-sm > * + * { margin-top: 0.75rem; }
.stack-lg > * + * { margin-top: 1.5rem; }

/* ── Divider ───────────────────────────────────────────────────────── */

.divider {
  border: none;
  border-top: 1px solid var(--stone-200);
}