@media (max-width: 75em) {

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

}

@media (max-width: 50em) {

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

    .accordion {
        font-size: 2.4rem;
    }

}



@media (max-width: 101.6em) {

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

    .intro-img-box-mobile {
        display: block;
    }

    .intro-text {
        max-width: 84rem;
    }

    .intro {
        padding: 0.6rem;
    }


}


@media (max-width: 97.3em) {
    .cards-container {
        grid-template-columns: 1fr 1fr;
        justify-content: space-around;
    }
    .card-item {
        justify-self: flex-end;
    }
}

@media (max-width: 87.5em) {
    
    .slideshow {
        height: 100vh;
    }
    .gallery-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }
    .hide-gallery {
        display: none;
    }
}

@media (max-width: 75em) {
    .page-z-container {
        grid-template-columns: 1fr;
    }

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

    .open-nav {
        display: block;
    }

    .nav-list {
        display: none;
    }
}

@media (max-width: 62.5em) {
    html {
        font-size: 58%;
    }
    .header-box {
        justify-content: space-between;
        grid-template-columns: 1fr 1fr;
    }
    .menu-btn {
        justify-self: flex-end;
        align-self: center;
        display: block;
    }
    .main-nav-list {
        display: none;
    }
    .icons-container {
        grid-template-columns: 1fr 1fr;
        row-gap: 5rem;
    }
    .slideshow {
        grid-template-columns: 1fr 0fr 10fr 1fr;
    }
    .slideshow-title {
        font-size: 3.6rem;
    }
    .slideshow-text {
        font-size: 2.2rem;
    }
    .footer-container {
        grid-template-columns: 1fr 1fr;
        row-gap: 5rem;
    }

    .intro {
        padding: 2.4rem 0.6rem;
    }
    
    .intro-container {
        grid-template-columns: 1fr;
        row-gap: 2.4rem;
    }

}

@media (max-width: 56.25em) {
    .cards-container {
        grid-template-columns: 1fr;
    }
    .tabbed-container {
        grid-template-columns: repeat(2, 1fr)
    }
    .tabbed-text-box {
        grid-column: 1/3;
    }
    .cta-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 47em) {
    .hero {
        height: 100vh;
    }
    .slide-arrow {
        width: 6rem;
    }
    .icons-container {
        grid-template-columns: 1fr;
    }
    .gallery {
        padding: 9.6rem 1.2rem;
    }
    .gallery-container {
        grid-template-columns: 1fr 1fr;
    }
    .hide-gallery {
        display: block;
    }
    .footer-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40em) {
    .header {
        padding: 1.2rem;
    }
    .logo {
        height: 7rem;
    }
    .hero-title {
        font-size: 3.6rem;
    }
    .caption-title {
        font-size: 2.2rem;
    }
    .hero-container {
        grid-template-columns: 1fr;
    }
    .hero-text {
        font-size: 2rem;
        background: linear-gradient(270deg, rgba(255, 255, 255, 0.863),rgba(255, 255, 255, 0));
        padding: 0.8rem;
        border-radius: 1%;
    }
    .hero-btns {
        flex-direction: column;
    }
    .hero-btn {
        align-self: flex-start;
    }
    .hero-text-box {
        row-gap: 1.2rem;
    }
    .slideshow {
        grid-template-rows: 1fr 2fr;
    }
    .slideshow-box {
        grid-column: 1/5;
        grid-row: 1/2;
    }
    .left-arrow {
        grid-column: 1/2;
        align-self: flex-start;
    }
    .right-arrow {
        grid-column: 4/5;
        align-self: flex-start;
    }
}

@media (max-width: 32em) {
    .tabbed {
        padding: 9.6rem 1.2rem;
    }
    .tabbed-container {
        grid-template-columns: 1fr;
    }
    .tabbed-text-box {
        grid-column: 1/2;
    }
    .tabbed-text {
        padding: 2.4rem;
    }
}

@media (max-width: 27.5em) {
    .card-item {
        padding: 3.2rem;
        gap: 1.2rem;
        max-width: 40rem;
        justify-self: center;
    }
    .card-image {
        max-width: 40rem;
    }
    .slideshow {
        padding-top: 0.8rem;
    }
    .slideshow-title {
        font-size: 2.6rem;
    }
    .slideshow-text {
        font-size: 1.8rem;
    }
    .cta-title {
        font-size: 2.6rem;
    }
    .cta-text-box {
        font-size: 1.8rem;
    }
    .cta-socials {
        gap: 3.2rem;
    }
    .cta {
        padding: 4.8rem 1.2rem 9.6rem;
    }

}