/* ----------------------------------------------- */
/* BELOW 1344px (smaller desktops)*/
/* ----------------------------------------------- */

@media (max-width: 84em){
    .hero{
    max-width: 120rem;}
}

/* ----------------------------------------------- */
/* BELOW 1200px (landscape tablets)*/
/* ----------------------------------------------- */

@media (max-width: 75em){
    html{
        font-size: 56.25%
    };
    .header{
        padding: 0 3.2rem;
    };
    .main-nav-list{
        gap: 3.2rem;
    }
    .grid{
        column-gap: 4.8rem; 
        row-gap: 6.4rem;
    }

    .testimonial-container{
        padding: 9.6rem 3.2rem;
    }

    .impact-frame{
        width: 50rem ;
        height: 30rem;
    }

}

/* ----------------------------------------------- */
/* BELOW 944px (landscape tablets)*/
/* ----------------------------------------------- */

@media (max-width: 59em){
    html{
        font-size: 50%;
    }
    .heading-primary{
        font-size: 4.4rem;
    }
    .heading-secondary{
        font-size: 3.6rem;
    }
    .heading-tertiary{
        font-size: 2.4rem;
    }
    .heading-tertiary-extra{
        font-size: 2rem;
    }
    .main-nav-list{
        gap: 3.2rem;
    }
}

/* ----------------------------------------------- */
/* BELOW 808px (landscape tablets)*/
/* ----------------------------------------------- */

@media (max-width: 50.5em){
    .hero{
        grid-template-columns: 1fr;
    }
    .hero-text{
        text-align: center;
    }
    .hero-img-box{
        text-align: center;
    }
    .hero-img{
        width: 40%;
    }
    .impact-container{
        flex-direction: column;
        gap: 4.8rem;
    }
    .impact-grid{
        grid-template-columns: 1fr;
        text-align: center;
        gap: 4.8rem;
    }
    .section-testimonial{
        grid-template-columns: 1fr;
    }
    .gallery{
        grid-template-columns: repeat(2, 1fr);
    }
    .btn-mobile-nav{
        display: block;
    }
    .main-nav{
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(100%);
        transition: all 0.5s ease-in;

        /* 1) Hide it visualy*/
        opacity: 0;

        /* 2) Hide it from mouse and keyboard */
        pointer-events: none;

        /* 3) Hide it from screen readers */
        visibility: hidden;
    }

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

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

    .main-nav-list{
        flex-direction: column;
        gap: 3rem;
    }
    .main-nav-link:link,
    .main-nav-link:visited {
        font-size: 3rem;
    }

}

/* ----------------------------------------------- */
/* BELOW 704px (small tablets)*/
/* ----------------------------------------------- */

@media (max-width: 44em){
    .heading-secondary{
        margin-bottom: 4.8rem;
    }
    .grid--3-cols{
        grid-template-columns: repeat(2, 1fr);
    }
    .grid--2-cols{
        grid-template-columns: 1fr;
    }
    .grid--footer{
        grid-template-columns: 1fr 1fr ;
    }
    .nav-col{
        grid-row: 1/1;
    }
    .cta{
        grid-template-columns: 1fr 1fr;
    }
    .cta-text-box{
    padding: 2.4rem 3.2rem 3.2rem 3.2rem;
    .cta-form{
        grid-template-columns: 1fr;
        row-gap: 3.2rem;
    }

}

/* ----------------------------------------------- */
/* BELOW 704px (small tablets)*/
/* ----------------------------------------------- */

@media (max-width: 34em){
    .btn,
    .btn:link, 
    .btn:visited{
        padding: 3.2rem 1.6rem;
    }
    .hero-img{
        width: 80%;
    }
    .grid--3-cols,
    .grid--2-cols{
        grid-template-columns: 1fr;
    }
     .impact-frame{
        width: 100% ;
        height: 100%;
    }
    .testimonials{
        grid-template-columns: 1fr;
    }
    .team-grid{
        grid-template-columns: 1fr;
    }
    .image-container{
        text-align: center;
    }
    .founder-img{
        width: 80%
    }
    .container{
        text-align: center;
    }
    .gallery{
        grid-template-columns: repeat(3, 1fr);
    }
    .donate-image-box{
        height: 32rem;
    }
    .cta{
        grid-template-columns: 1fr;
    }
    .cta-image-box{
        height: 32rem;
        grid-row: 1;
    }

}

/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/