@media (max-width: 75em) {

    .quad-row-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .quad-row-item {
        max-height: 40rem;
    }
    
    .quad-row-item-two {
        max-height: 40rem;
    }

    .z {
        padding: 4.8rem 1.2rem 2.4rem;
    }

    .z-text-box {
        padding-left: 1.2rem;
    }

    .z-item {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4.8rem;
    }

    .z-img {
        width: 70%;
    }

    .z-text-box-row-one {
        grid-row: 1/2;
    }

    .trio-icons-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 4.8rem;
        column-gap: 2.4rem;
    }

}

@media (max-width: 56.25em) {


    .hero {
        background-position: 61%;
        height: 110vh;
    }

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



}

@media (max-width: 32.5em) {


    .hero {
        background-position: 61%;
        height: 60vh;
    }

    .hero-container {
        padding: 0 0.6rem 1.2rem;
        grid-template-columns: 1fr;
    }

    .hero-header {
        justify-self: flex-end;
        align-self: flex-end;
        margin-bottom: -2rem;
        color: #fff;
        text-align: center;
    }

    .hero-caption {
        text-align: center;
    }

}


@media (max-width: 50em) {

    .quad-row-item {
        height: 60rem;
    }
    
    .quad-row-item-two {
        height: 60rem;
    }

    .hero {
        padding: 1.2rem 1.2rem
    }

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

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



    .quad-row-container {
        display: grid;
        grid-template-columns: 1fr;
    }

    .trio-icons-container {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 4.8rem;
        column-gap: 2.4rem;
    }


    .z-img {
        width: 100%;
    }


    .bullet-point::before {
        width: 0.9rem;
        margin-left: -1.2rem;
    }

    .bullet-points-list {
        padding: 0rem;
    }

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

    .note-container {
        grid-template-columns: 1fr;
        padding: 0 1.2rem 0 2.4rem;
    }

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

}


@media (max-width: 39em) {

    .quad-row-item {
        height: 30rem;
    }
    
    .quad-row-item-two {
        height: 30rem;
    }

}


@media (max-width: 25em) {

    .quad-row-item {
        height: 20rem;
    }
    
    .quad-row-item-two {
        height: 20rem;
    }

}