/* ==========================================
   QResta Rewards
   RESPONSIVE / MOBILE / DESKTOP
========================================== */

/* SMALL PHONES */
@media(max-width:390px){

  .phoneApp{
    padding:18px 14px 0;
  }

  .appHeader h1{
    font-size:28px;
  }

  .appHeader h1 span{
    font-size:36px;
  }

  .heroCard{
    grid-template-columns:1fr;
    text-align:center;
    gap:16px;
  }

  .circleBox{
    margin:auto;
  }

  .quickGrid{
    grid-template-columns:repeat(2,1fr);
  }

  .bottomNav{
    height:78px;
  }

  .bottomNav a,
  .bottomNav button{
    font-size:22px;
  }

  .bottomNav small{
    font-size:11px;
  }
}

/* TABLET / MOBILE */
@media(max-width:640px){

 @media(max-width:640px){

  .slideBtn{
    display:flex;
    width:34px;
    height:34px;
    font-size:24px;
  }

  .slideBtn.left{
    left:2px;
  }

  .slideBtn.right{
    right:2px;
  }

  .cardScroll{
    padding:0 42px 8px;
  }
}

  .cardScroll{
    padding:0 2px 8px;
  }

  .rewardCard{
    flex:0 0 150px;
  }

  .restaurantCard{
    flex:0 0 180px;
  }
}

/* DESKTOP VIEW */
@media(min-width:900px){

  body{
    background:#f5f8ff;
    padding-bottom:110px;
  }

  .phoneApp{
    max-width:1200px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:26px;
    align-items:start;
    padding:30px 24px 0;
  }

  .mainColumn{
    min-width:0;
  }

  .sideColumn{
    min-width:0;
    position:sticky;
    top:24px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .appHeader h1{
    font-size:38px;
  }

  .appHeader h1 span{
    font-size:48px;
  }

  .heroCard{
    min-height:190px;
    grid-template-columns:1fr 130px 1fr;
    padding:28px;
    border-radius:28px;
  }

  .pointsBlock h2{
    font-size:58px;
  }

  .circleBox{
    width:128px;
    height:128px;
  }

  .circleInner{
    width:94px;
    height:94px;
  }

  .quickGrid article{
    min-height:125px;
    padding:18px 14px;
  }

  .quickGrid h3{
    font-size:16px;
  }

  .quickGrid p{
    font-size:13px;
  }

  .cardScroll{
    padding:0 46px 16px;
  }

  .rewardCard{
    flex:0 0 260px;
  }

  .restaurantCard{
    flex:0 0 330px;
  }

  .foodImg{
    height:165px;
  }

  .restImg{
    height:185px;
  }

  .rewardCard h3,
  .restaurantCard h3{
    font-size:17px;
    margin:13px 14px 5px;
  }

  .rewardCard p,
  .restaurantCard p{
    font-size:14px;
    margin:0 14px 15px;
  }

  .restaurantCard a{
    margin:0 14px 15px;
  }

  .activityDropdown{
    margin:0;
    border-radius:24px;
  }

  .promo{
    margin:0;
    min-height:220px;
    border-radius:24px;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
  }

  .promo div:first-child{
    font-size:42px;
  }

  .promo h3{
    font-size:23px;
  }

  .bottomNav{
    max-width:1200px;
  }
}/* DESKTOP FLUID LAYOUT ONLY */
@media(min-width:900px){

  .phoneApp{
    width:100%;
    max-width:none;
    padding:30px 40px 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:28px;
  }

  .bottomNav{
    max-width:none;
    width:100%;
  }

  .cardScroll{
    padding:0 50px 16px;
  }

  .rewardCard{
    flex:0 0 clamp(220px, 21vw, 300px);
  }

  .restaurantCard{
    flex:0 0 clamp(280px, 28vw, 380px);
  }

  .foodImg{
    height:clamp(140px, 13vw, 190px);
  }

  .restImg{
    height:clamp(160px, 15vw, 220px);
  }
}