@media (max-width: 82.25em) {

.hero {
    height: 80vh;
}


}


@media (max-width: 65.55em) {

    .hero {
        height: 60vh;
    }

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

    .page-z-img {
        width: 50%;
    }
    
    
    }



@media (max-width: 59.4em) {


    .about-container {
        flex-direction: column;
    }

    .parallax1 {
        background-position: center;
    }


    .z-item {
        grid-template-columns: 1fr;
    }

    .z-img {
        justify-self: center;
    }

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

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

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

@media (max-width: 50em) {

    .hero {
        background-image: url("imgs/RubyTabletHero.jpg");
        height: 100vh;
        background-position: center;
    }

    .header-link {
        display: none;
    }

    .open-nav {
        display: block;
    }

    .z-img {
        width: 100%;
    }

    .parallax2 {
        background-position: 45%;
    }

    .pricing-item-box {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

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

    .contact {
        padding: 9.6rem 0.6rem;
    }

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

    .about-header,
    .z-header,
    .contact-header {
        font-size: 3.6rem;
    }

    .about-text,
    .z-text,
    .about-link,
    .pricing-text {
        font-size: 2.2rem;
    }

    .pricing-item {
        padding: 1.2rem 1.2rem 1.2rem 3.2rem;
    }

    .gallery {
        padding: 9.6rem 0 2.4rem;
    }

    .contact {
        padding: 9.6rem 0.6rem 2.4rem;
    }

    .contact-form {
        padding: 2.4rem 0.6rem;
    }

    .page-z-img {
        width: 80%;
    }

}


@media (max-width: 36.25em) {

    .cookies {
        padding: 1.2rem;
    }
    .cookies-container {
        gap: 2.4rem;
        flex-direction: column;
    }

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

    .cookies-btn-box {
        gap: 1.2rem;
    }

    .cookies-btn {
        font-size: 1.8rem;
    }

    .hero {
        height: 80vh;
    }

    .about-img {
        width: 100%;
    }

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

    .pricing-price {
        font-size: 2.8rem;
    }

    .pricing-time {
        font-size: 2.2rem;
    }

    .about-header,
    .z-header,
    .contact-header,
    .header-link,
    .pricing-title {
        font-size: 2.4rem;
    }

    .about-text,
    .z-text,
    .about-link,
    .pricing-text {
        font-size: 1.8rem;
    }

    .page-title {
        font-size: 4.8rem;
    }

    .page-header {
        font-size: 3.6rem;
    }

}


@media (max-width: 28.5em) {

    .hero {
        height: 50rem;
    }


    .header-container {
        gap: 0;
    }

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