.reviews-page{
    background:var(--color-bg);
}

.reviews-hero{
    padding:90px 0;
    background:var(--color-white);
}

.reviews-page-gallery{
    padding:90px 0;
    background:var(--color-bg);
}

.reviews-page-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;

    max-width:1200px;
    margin:50px auto 0;
    padding:0 20px;
}

.review-image{
    display:block;
    overflow:hidden;

    border-radius:20px;
    background:var(--color-white);
    box-shadow:var(--shadow-soft);

    transition:.3s;
}

.review-image:hover{
    transform:translateY(-5px);
}

.review-image img{
    width:100%;
    height:260px;

    object-fit:cover;
    object-position:top;

    display:block;
}

.hidden{
    display:none;
}

.reviews-page-more{
    margin:45px 0 70px;
    text-align:center;
}

.reviews-cta{
    padding:0 0 90px;
}

.reviews-cta__box{
    padding:55px;
    border-radius:var(--radius-lg);
    background:var(--color-primary);
    color:var(--color-white);
    text-align:center;
}

.reviews-cta__box .section-title{
    color:var(--color-white);
    margin-bottom:20px;
}

.reviews-cta__box p{
    max-width:620px;
    margin:0 auto 30px;

    font-size:17px;
    line-height:1.8;
}

.reviews-cta__box .btn{
    background:var(--color-white);
    color:var(--color-primary);
}

/* modal */

.reviews-modal{
    position:fixed;
    inset:0;
    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px 80px;
    background:rgba(0,0,0,.85);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.3s;
}

.reviews-modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.reviews-modal__img{
    max-width:90%;
    max-height:90vh;
    object-fit:contain;
    border-radius:14px;
}

.reviews-modal__close,
.reviews-modal__arrow{
    position:absolute;
    border:none;
    background:rgba(255,255,255,.15);
    color:white;
    cursor:pointer;
    transition:.3s;
}

.reviews-modal__close:hover,
.reviews-modal__arrow:hover{
    background:rgba(255,255,255,.28);
}

.reviews-modal__close{
    top:24px;
    right:32px;
    width:48px;
    height:48px;
    border-radius:50%;
    font-size:38px;
}

.reviews-modal__arrow{
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border-radius:50%;
    font-size:50px;
}

.reviews-modal__arrow--prev{
    left:32px;
}

.reviews-modal__arrow--next{
    right:32px;
}

/* adaptive */

@media(max-width:1100px){

    .reviews-page-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media(max-width:768px){

    .reviews-hero,
    .reviews-page-gallery{
        padding:60px 0;
    }

    .reviews-page-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:16px;
        margin-top:35px;
    }

    .review-image img{
        height:230px;
    }

    .reviews-cta{
        padding-bottom:60px;
    }

    .reviews-cta__box{
        padding:40px 26px;
        border-radius:var(--radius-md);
    }

    .reviews-modal{
        padding:30px 18px;
    }

    .reviews-modal__img{
        max-width:100%;
        max-height:86vh;
    }

    .reviews-modal__close{
        top:14px;
        right:14px;
        width:42px;
        height:42px;
        font-size:34px;
    }

    .reviews-modal__arrow{
        width:42px;
        height:42px;
        font-size:40px;
    }

    .reviews-modal__arrow--prev{
        left:10px;
    }

    .reviews-modal__arrow--next{
        right:10px;
    }
}

@media(max-width:480px){

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

    .review-image img{
        height:240px;
    }

    .reviews-page-more .btn,
    .reviews-cta__box .btn{
        width:100%;
    }

    .reviews-cta__box{
        padding:34px 22px;
    }

    .reviews-cta__box p{
        font-size:15px;
        line-height:1.7;
    }
}