/*
  Wappy responsive contract.

  Mobile:  <= 960px
  Desktop: >= 961px
  Wide desktop is a secondary layout mode used by shells that need extra room.

  Keep these values in sync with app/javascript/lib/responsive.js. CSS media
  queries cannot consume custom properties, so the shared file is the single
  documented source for the boundary and JS mirrors it for interactive state.
*/
:root {
  --wappy-mobile-max-width: 960px;
  --wappy-desktop-min-width: 961px;
  --wappy-wide-desktop-min-width: 1280px;
}

html.wappy-viewport-mobile .wappy-desktop-only {
  display: none !important;
}

html.wappy-viewport-desktop .wappy-mobile-only {
  display: none !important;
}