/* rem and em DO NOT depend on HTML font size in media queries

Instead, 1 rem = 1em = 16px
*/

/* 
************BELOW 1300px (Smaller desktops)
*/

@media (max-width: 82em) {
}

/* 
************BELOW 1020px (Large Portrait Tablets)
*/

@media (max-width: 64em) {
  .grid--4-cols {
    grid-template-columns: 1fr 1fr;
  }

  .section-features {
    background-position: 80%;
  }
}

/* 
************BELOW 800px**************
*/

/* mobile Menu */
@media (max-width: 50em) {
  .hero-header {
    position: relative;
  }

  .main-nav {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;

    background-color: rgba(255, 255, 255, 0.616);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9998;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateX(100%);

    /* 1) Hide element visually */
    opacity: 0;
    /* 2) make it unaccessible to mouse and keyboard */
    pointer-events: none;
    /* 3) Hide it from screen readers */
    visibility: hidden;

    transition: all 0.3s ease-in-out;
  }

  .mobile-nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0%);
  }

  .main-nav-list {
    display: flex;
    flex-direction: column;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    color: #333;
    font-size: 4.4rem;
    font-weight: 700;
  }

  .btn-mobile-nav[name='menu-icon'] {
    display: block;
  }

  .btn-mobile-nav[name='menu-icon'] path {
    stroke: #fff;
  }

  .mobile-nav-open .btn-mobile-nav[name='close-icon'] {
    display: block;
  }

  .mobile-nav-open .btn-mobile-nav[name='menu-icon'] {
    display: none;
  }
}

/* 
************BELOW 700px**************
*/
@media (max-width: 44em) {
  .grid--4-cols {
    grid-template-columns: 1fr;
  }
  .grid--2-cols {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 0 4.8rem;
  }

  .app-download-img {
    width: 80%;
  }
}

/* 
***********Below 550px (Mobile Navigation portrait)
*/

@media (max-width: 34em) {
  .hero-heading {
    font-size: 4.4rem;
  }

  .container {
    padding: 0 2.4rem;
  }
}