/*
 * Fluid type lives in the clamp() tokens.
 * These queries only step container padding and keep the caps at 2560, 3840 and 5120.
 *
 * 360, 390, 430, 768, 1024, 1366, 1440, 1920, 2560, 3840, 5120.
 * Media queries cannot read --bp-* custom properties, so the widths are literal.
 */

/* 360: baseline padding is --container-padding: 1rem in variables.css. */

@media (min-width: 390px) {
  :root {
    --container-padding: 1.125rem;
  }
}

@media (min-width: 430px) {
  :root {
    --container-padding: 1.25rem;
  }
}

@media (min-width: 768px) {
  :root {
    --container-padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 1.75rem;
  }
}

@media (min-width: 1366px) {
  :root {
    --container-padding: 2rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --container-padding: 2rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --container-padding: 2.75rem;
    --container-wide-max: 1600px;
  }
}

@media (min-width: 2560px) {
  :root {
    --container-padding: 3.25rem;
    --container-max: 1360px;
    --container-wide-max: 1680px;
  }
}

@media (min-width: 3840px) {
  :root {
    --container-padding: 4rem;
    --container-max: 1440px;
    --container-wide-max: 1760px;
  }
}

@media (min-width: 5120px) {
  :root {
    --container-padding: 5rem;
    --container-max: 1440px;
    --container-wide-max: 1800px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lift: 0px;
    --lift-card: 0px;
    --duration: 0.01ms;
    --duration-fast: 0.01ms;
    --duration-slow: 0.01ms;
  }

  html {
    scroll-behavior: auto;
  }
}