/* ==========================================================================
   Layout — Container, Grid, Responsive
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-2xl);
}

section {
  padding-block: var(--section-py);
  position: relative;
}

/* Responsive breakpoints (mobile-first) */

@media (max-width: 639px) {
  :root {
    --section-py: 64px;
  }
  .container {
    padding-inline: var(--sp-lg);
  }
}

@media (min-width: 640px) {
  .container {
    padding-inline: var(--sp-2xl);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--sp-3xl);
  }
}