/* ==============================================================================
   PAGE LAYOUT
   ============================================================================== */

/* One column of blocks, centred and capped at a reading-friendly width. The
   gap between blocks lives here, once, instead of on every block's own
   margin, so a new block type never has to remember to add it. */
.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

@media (max-width: 480px) {
  .page {
    padding: var(--spacing-lg) var(--spacing-md);
  }
}