/* ==========================================================================
   responsive.css - custom responsive overrides, grouped by device tier.
   Loaded AFTER main.css, so anything added here overrides the base + component
   styles in main.css. (main.css keeps its own media queries; add YOUR custom
   overrides below, under the matching tier.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE ONLY  -  phones (up to 809px)
   -------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* add mobile-only overrides here */
}

/* --------------------------------------------------------------------------
   MOBILE AND TABLET  -  everything below desktop (up to 1199px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  /* add phone + tablet overrides here */
}

/* --------------------------------------------------------------------------
   TABLET AND ABOVE  -  tablets and larger (810px and up)
   -------------------------------------------------------------------------- */
@media (min-width: 810px) {
  /* add tablet-and-up overrides here */
}

/* --------------------------------------------------------------------------
   DESKTOP ONLY  -  large screens (1200px and up)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  /* add desktop-only overrides here */
}

/* --------------------------------------------------------------------------
   EXTRA-WIDE SCREENS  -  very large desktops (1440px and up)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  /* add extra-wide overrides here */
}