/* gallery */

.gallery-thumbs{

    display:flex;

    gap:16px;

    margin-top:20px;

}

.thumb{

    all:unset;

    cursor:pointer;

    width:80px;

    height:80px;

    border-radius:16px;

    overflow:hidden;

    border:2px solid transparent;

    transition:.25s;

}

.thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.thumb:hover{

    border-color:var(--primary);

}

.thumb.active{

    border-color:var(--primary);

}

.main-image img{

    width:100%;

    display:block;

    border-radius:24px;

    transition:opacity .4s;

}
.main-image{

    position:relative;
    

}

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    cursor:pointer;

    font-size:22px;

    color:var(--heading);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s;

    z-index:10;

    backdrop-filter:blur(10px);

}

.gallery-arrow:hover{

    background:var(--primary);

    color:#fff;

}

.gallery-arrow.prev{

    left:20px;

}

.gallery-arrow.next{

    right:20px;

}

@media (max-width:640px){

    .gallery-thumbs{

        gap:10px;

        overflow-x:auto;

        padding-bottom:4px;

    }

    .thumb{

        width:64px;

        height:64px;

        flex:0 0 auto;

    }

    .gallery-arrow{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .gallery-arrow.prev{

        left:12px;

    }

    .gallery-arrow.next{

        right:12px;

    }

}