﻿.rs-gallery-slider .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.rs-gallery-slider .image-part {
    position: relative
}

    .rs-gallery-slider .image-part::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(180deg,rgba(3,3,3,0) 45.38%,#030303 111.13%);
        z-index: 1
    }

    .rs-gallery-slider .image-part img {
        width: 100%;
        object-fit: cover;
        object-position: top center;
        height: auto
    }

.rs-gallery-slider.lightbox-enabled .g-item .image-part {
    border-color: var(--borderColor)
}

    .rs-gallery-slider.lightbox-enabled .g-item .image-part a {
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 1
    }

        .rs-gallery-slider.lightbox-enabled .g-item .image-part a .lightbox-icon {
            position: absolute;
            left: 50%;
            top: calc(50% + 15px);
            transform: translate(-50%,-50%);
            width: 70px;
            height: 70px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primaryColor);
            color: var(--primaryFgColor);
            border-radius: 50%;
            transition: .3s;
            opacity: 0;
            visibility: hidden;
            z-index: 3
        }

            .rs-gallery-slider.lightbox-enabled .g-item .image-part a .lightbox-icon svg {
                width: 1em;
                height: 1em;
                fill: currentColor
            }

        .rs-gallery-slider.lightbox-enabled .g-item .image-part a::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 2;
            background-color: rgba(43,57,68,.5);
            opacity: 0;
            visibility: hidden;
            transition: .3s
        }

        .rs-gallery-slider.lightbox-enabled .g-item .image-part a:hover .lightbox-icon {
            opacity: 1;
            visibility: visible;
            top: 50%
        }

        .rs-gallery-slider.lightbox-enabled .g-item .image-part a:hover::after {
            visibility: visible;
            opacity: 1
        }

.rs-gallery-slider:not(.lightbox-enabled) .g-item .image-part {
    overflow: hidden;
    border-color: var(--borderColor)
}

.rs-gallery-thumb-slider {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .rs-gallery-thumb-slider .rs-gallery-slider {
        flex: 0 0 auto;
        width: 100%;
        max-width: calc(100% - 140px);
        margin-left: 0;
        margin-right: 0
    }

    .rs-gallery-thumb-slider .rs-thumb-sl {
        flex: 0 0 auto;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        max-width: 110px;
        flex-shrink: 0;
        height: 602px
    }

        .rs-gallery-thumb-slider .rs-thumb-sl .image-part {
            opacity: 1;
            transition: var(--transition);
            overflow: hidden;
            width: 100%;
            height: 100%;
            border: 2px solid transparent
        }

            .rs-gallery-thumb-slider .rs-thumb-sl .image-part img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center
            }

        .rs-gallery-thumb-slider .rs-thumb-sl .swiper-slide-thumb-active .image-part {
            border-color: var(--primaryColor);
            transform: scale(1)
        }
