/*****************/
/* Media Queries */
/*****************/

@media only screen and (max-width: 1000px) {
    .hero-grid {
        grid-template-areas:
            "hero-img hero-img"
            "hero-japan hero-japan"
            "hero-content hero-content";
    }

    .features-header {
        grid-template-columns: 1fr;
    }

    .features-header h2 {
        max-width: 100%;
    }

    .features-grid article {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 1.5rem;
    }

    .testimonials-container {
        grid-template-areas:
            "testimonial-h2 testimonial-h2"
            "testimonial-img testimonial-img"
            "testimonial-content testimonial-content";
        grid-template-columns: 1fr;
        grid-template-rows: 3.4rem 30rem auto;
    }

    .testimonials-container .img-container img {
        object-position: 50% 65%;
    }
}

@media only screen and (max-width: 900px) {
    html {
        font-size: 85%;
    }

    .cta-container {
        background-position: 0;
    }
}

@media only screen and (max-width: 680px) {
    section > div {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .features-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

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

    .cta-section {
        padding: 0 1.5rem;
    }

    .cta-container {
        background-position: 50%;
    }
}