/* ===================================================================
   RESPONSIVE
   Breakpoints for tablet and mobile. Load this file last so it can
   override the desktop-first rules above.
=================================================================== */
@media (max-width:960px){
  .hero{grid-template-columns:1fr;}
  .desk-scene{margin-top:20px;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .desk-grid{grid-template-columns:repeat(2,1fr);}
  .qr-grid{grid-template-columns:repeat(2,1fr);}
  .pos-layout{grid-template-columns:1fr;}
  .pos-cart{position:static;}
  .pos-menu{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:680px){
  .feature-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  #view-dashboard{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:relative;flex-direction:row;align-items:center;padding:14px 16px;}
  .sidebar .brand{margin:0 16px 0 0;}
  .navlist{flex-direction:row;flex:1;overflow-x:auto;}
  .navlist button span{display:none;}
  .sidebar-foot{display:none;}
  .main{padding:24px 18px;}
  .desk-grid{grid-template-columns:1fr 1fr;}
  .qr-grid{grid-template-columns:1fr 1fr;}
  .pos-menu{grid-template-columns:1fr;}
}