/* ==========================================================================
   Responsive — global layout breakpoints
   (Component-specific responsive rules live in each component file.
    The mobile nav is handled in components/header.css at 900px.)
   ========================================================================== */

@media (max-width: 1620px) {
  .container { padding-inline: 64px; }
}

@media (max-width: 1100px) {
  :root { --container: 100%; }
  .h2--big { font-size: 36px; }
}

@media (max-width: 720px) {
  .container { padding-inline: 24px; }

  .section     { padding: 56px 0; }
  .section--lg { padding: 64px 0; }

  .h2--big { font-size: 28px; }
  .h2--mid { font-size: 24px; }
}