/* Responsive section container variables — overrides static values in variables.css */
:root {
  --section-max-width: 100%;
  --section-padding-x: 16px;
}

@media (min-width: 640px) {
  :root {
    --section-max-width: 600px;
    --section-padding-x: 24px;
  }
}

@media (min-width: 768px) {
  :root {
    --section-max-width: 720px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-max-width: 960px;
    --section-padding-x: 32px;
  }
}

@media (min-width: 1280px) {
  :root {
    --section-max-width: 1200px;
    --section-padding-x: 40px;
  }
}

@media (min-width: 1536px) {
  :root {
    --section-max-width: 1520px;
    --section-padding-x: 48px;
  }
}