@media (max-width: 68.75em) {

    .z-item:last-child {
        flex-direction: column;
        align-items: center;
    }

    .z-img-small {
        width: 80%;
        min-width: none;
    }

}


@media (max-width: 56.25em) {

    .menu-btn {
        display: block;
    }

    .header-nav {
        display: none;
    }

    .z-item {
        flex-direction: column;
        align-items: center;
    }

    .z-item .z-img {
        width: 80%;
        min-width: 5rem;
    }


    .z-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .z-force-up {
        grid-row: 1/2;
    }

    .contact-img-box {
        display: none;
    }

    .contact-container {

        grid-template-columns: 1fr;

    }

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

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

    .mission-container {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .mission-img {
        margin-top: 0rem;
        border-radius: 23px;
        width: 90%;
    }

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

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

    .about {
        padding: 4.8rem 0.6rem;
        background-image: linear-gradient(90deg, #fff 50%, #8b957188 50%);
    }

    .about-container {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 4.8rem;
    }

    .about-img-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .about-img {
        margin-left: 0rem;
        border-radius: 23px;
        width: 90%;
    }

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

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

}

@media (max-width: 37.5em) {

    .z-item .z-img,
    .z-duo-img-box .z-img-duo,
    .z-img-small {
        width: 40rem
    }

}

@media (max-width: 31.25em) {

    .header-logo {
        width: 6.5rem;
    }

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

    .hero {
        padding: 0.6rem 0rem;
        background-image: url("imgs/hero.jpg");
        height: 90vh;
        background-size: cover;
        background-position: 43%;
        position: relative;
    }

    .mission-strip {
        height: 15rem;
    }

    .mission-strip-header {
        font-size: 3.6rem;
    }

    .about-text-box {
        width: 95%;

    }

    .about-email {
        font-size: 2rem;
    }


}

@media (max-width: 28.5em) {

    .z-item .z-img,
    .z-duo-img-box .z-img-duo,
    .z-img-small {
        width: 27rem
    }

}