@media (max-width: 75em) {

    .about-container {
        grid-template-columns: 1fr;
    }

    .about-text-box {
        width: 90%;
    }

    .about-img {
        width: 50rem;
    }

    .parallax1 {
        background-position: 75%;
    }

    .services-container {
        grid-template-columns: 1fr;
    }

    .services-img {
        width: 50rem;
    }

    .services1 {
        grid-row: 3/4;
    }

    .services3 {
        grid-row: 7/8;
    }

    .services-text-box {
        width: 80%;
    }


    .pricing-container {
        grid-template-columns: 1fr 1fr;
        row-gap: 3.6rem;
    }

    .parallax2 {
        background-position: 70%;
    }

    .loyalty-img {
        width: 50rem;
    }

    .gallery-container {
        grid-template-columns: 1fr;
    }

    .footer-container {
        grid-template-columns: 1fr;
        row-gap: 3.6rem;
    }

}

@media (max-width: 37.5em) {

    .header {
        padding: 0.6rem;
    }

    .header-link {
        font-size: 2.4rem;
    }

    .header-logo {
        width: 9rem;
        bottom: -5rem;
    }

    .hero {
        background-position: 60%;
    }

    .hero-header {
        font-size: 6rem;
    }

    .hero-caption {
        font-size: 3.6rem;
    }

    .about-text-box,
    .services-text-box {
        width: 100%;
    }

    .parallax1 {
        background-position: 55%;
    }

    .about-img,
    .services-img,
    .loyalty-img,
    .butterfly-img {
        width: 30rem;
    }

    .pricing-container {
        grid-template-columns: 1fr;
    }

    .group-container {
        grid-template-columns: 1fr;
    }

    .group-butterfly {
        display: none;
    }

}