@media (max-width: 75em) {

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

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

}

@media (max-width: 56.25em) {

    .hero-header {
        text-align: center;
        font-size: 7.2rem;
    }

    .hero-caption {
        font-size: 6rem;
        text-align: center;
    }

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

    .laura-img {
        grid-row: 1/2;
    }

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

    .packages-img {
        width: 50rem;
    }

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

    .packages-header {
        text-align: center;
    }

    .about-img {
        width: 100%;
    }

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

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


@media (max-width: 37.5em) {

    .header-container {
        gap: 0.6rem;
    }

    .header-logo {
        width: 8rem;
    }
    
    .logo-box {
        gap: 0.6rem;
    }

    .header-nav {
        display: flex;
        gap: 0.6rem;
        align-content: center;
    }

    .header-social {
        width: 3rem;
    }

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

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

    .hero-caption {
        font-size: 4.8rem;
        text-align: center;
    }

    .why-reason-box {
        flex-direction: column;
    }

    .why-text {
        width: 100%;
    }

    .loyalty-img {
        width: 100%;
    }

    .services-pricing {
        align-self: center;
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        text-align: center;
    }

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

    .packages-img {
        width: 30rem;
    }

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

    .packages-header,
    .about-header,
    .why-header {
        font-size: 3.6rem;
    }

    .packages-text,
    .packages-link {
        font-size: 2.4rem;
    }

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

}


@media (max-width: 31.25em) {

    .hero-container {
        margin-top: 4.8rem;
    }

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

}