/* ── Breakpoints (reference — cannot be used inside @media conditions)
   desktop:  1200px
   tablet:   1024px
   mobile:    768px
   xs:        480px
── */

:root {
  --header-height: 100px;
  --site-padding:  200px;
}

@media (max-width: 1200px) {
  :root {
    --site-padding: 100px;
  }
}

@media (max-width: 1024px) {
  :root {
    --site-padding: 60px;
    --header-height: 80px;
  }
}

@media (max-width: 768px) {
  :root {
    --site-padding: 32px;
    --header-height: 70px;
  }
}

@media (max-width: 480px) {
  :root {
    --site-padding: 20px;
  }
}