/**************************/
/* BELOW 1344px (Smaller laptop) */
/**************************/
@media (width > 84em) {

}

@media (width <= 84em) {
    .hero__container {
        max-width: 120rem;
    }
    .hero__heading {
        font-size: 4.4rem;
    }
    .heading {
        font-size: 4.4rem;
    }
    
    .testimonials__gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/
@media (max-width: 75em) {
    html {
        font-size: 56.25%;
    }
    .grid, 
    .how__steps,
    .meals__grid,
    .features__list,
    .pricing__options {
        column-gap: 4.8rem;
        row-gap: 6.4rem;
    }
    .header {
        padding: 2.4rem 3.2rem;
    }
    .navbar {
        gap: 3.2rem;
    }
    .heading, 
    .cta__heading {
        font-size: 3.6rem;
    }
    
    .hero__container {
        column-gap: 4.8rem;
    }
    .testimonials {
        gap: 0;
    }
    .testimonials__container {
        padding: 9.6rem 3.2rem;
    }
}

/**************************/
/* BELOW 960px */
/**************************/
@media (width < 60em) {
    html {
        font-size: 50%;
    }        

    .navbar {
        background-color: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(10px);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);
    
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;
        
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
    }
    .open-nav .navbar {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }
    .navbar__list {
        flex-direction: column;
        justify-content: center;
        gap: 4.8rem;
    }
    .navbar__link {
        font-size: 3rem;
    }

    .mobile-nav {
        display: block;
        z-index: 999;
    }

    .open-nav .mobile-nav__icon[name="close-outline"] {
        display: block;
    }
    .open-nav .mobile-nav__icon[name="open-outline"] {
        display: none;
    }

    .hero__heading {
        text-align: center;
    }
    .hero__container {
        grid-template-columns: 1fr;
        padding: 0 8rem;
        gap: 6.4rem;
    }
    .hero__text-box,
    .hero__img-box {
      text-align: center;
    }
    .hero__img {
      width: 60%;
    }
    .hero__wapper {
        justify-content: center;
    }
    .hero__customers-box {
        justify-content: center;
    }

    .featured-in__brand {
        height: 2.4rem;
    }
    .featured-in__wapper {
        justify-content: space-around;
    }

    .how__number {
        font-size: 7.4rem;
    }

    .meals__intro {
        font-size: 2.4rem;
    }
    .meals__info-box {
        padding: 2.4rem 3.2rem 3.2rem 3.2rem;
    }
    .testimonials {
        grid-template-columns: 1fr;
    }
    .testimonials__gallery {
        grid-template-columns: repeat(4, 1fr);
    }
    .pricing__option {
        width: 85%;
    }
    .cta__inner {
        grid-template-columns: 3fr 2fr;
    }
}

/**************************/
/* BELOW 680px */
/**************************/
@media (max-width: 44em) {

    .heading {
        margin-bottom: 4.8rem;
    }
    .featured-in__brand {
        height: 1.6rem;
    }
    .meals__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .meals__diets {
        grid-column: 1/-1;
        justify-self: center;
    }
    .pricing__option {
        width: 100%;
    }
    .features__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--footer {
        grid-template-columns: repeat(6, 1fr);        
    }
    .footer__brand,
    .footer__contact-col {
        grid-row: 2;
        grid-column: span 3;
    }
    .footer__nav-col {
        grid-column: span 2;
    }   
}

/**************************/
/* BELOW 560px */
/**************************/
@media (max-width: 35em) {
    .btn--large:link, .btn--large:visited {
        padding: 2.4rem 1.6rem;
    }

    .grid, 
    .how__steps,
    .meals__grid,
    .features__list,
    .pricing__options {
        row-gap: 4.8rem;
    }

    .hero {
        padding: 2.4rem 0 6.4rem 0;
    }
    .hero__container {
        padding: 0 3.2rem;
    }

    .hero__img {
        width: 80%;
    }

    .featured-in__brand {
        height: 1.2rem;
    }    
    .how__steps {
        grid-template-columns: 1fr;
    }
    .how__image-box {
        transform: translateY(2.4rem);
    }
    .how__image-box:nth-child(2) {
        grid-row: 1;
    }
    .how__image-box:nth-child(6) {
        grid-row: 5;
    }
    .features__list {
        grid-template-columns: 1fr;
    }
    .meals__grid {
        grid-template-columns: 1fr;
    }
    .meals__card {
        width: 90%;
        justify-self: center;
    }

    .testimonials__quote-box {
        grid-template-columns: 1fr;
    }

    .cta__inner {
        grid-template-columns: 1fr;
    }

    .cta__box {
        padding: 3.2rem;
    }
    .cta__img {
        height: 32rem;
        grid-row: 1;
    }
}