@media (max-width: 81.25em) {
    
    .banner-headers {
        font-size: 3.6rem;
    }

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

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

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

    .e-text {
        text-align: center;
    }

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

}


@media (max-width: 56.25em) {

    .nav-list {
        display: none;
    }

    .open-nav {
        display: block;
    }

    .hero {
        padding: 0.6rem 1.2rem;
    }

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

    .hero-item {
        width: 100%;
    }

    .banner-headers {
        font-size: 2.4rem;
    }

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

}


@media (max-width: 50em) {

    .pricing-desktop-img {
        display: none;
    }

    .pricing-mobile-img {
        display: block;
        width: 37rem;
        align-self: center;
    }

}


@media (max-width: 37.5em) {

    .hero {
        background-position-x: center;
        width: 100%;
    }

    .hero-header-box {
        grid-template-columns: 1fr;
        row-gap: 4.8rem;
    }

    .hh2 {
        grid-row: 2/3;
        grid-column: 1/2;
        margin-left: 4.8rem;
    }

    .hh3 {
        grid-row: 3/4;
        grid-column: 1/2;
        margin-left: 6rem;
    }

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

    .z-img {
        width: 30rem;
    }

}

@media (max-width: 29.5em) {

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

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

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

    .email-text,
    .number-text {
        font-size: 2.2rem;
    }

    .pricing-mobile-img {
        width: 25rem;
    }

    .footer {
        padding: 4.8rem 0;
    }

}