/*
 * Галлерея.
 * Fancybox вариант.
 *
 *
 */

body {
    --fancybox-accent-color: #fff;
    --fancybox-thumbs-border-radius: 2px;
    --fancybox-thumbs-width: 96px;
    --fancybox-thumbs-ratio: 1.5;
}

.fancybox__thumb {
    border-radius: 2px;
}

.gallery-box {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.gallery-box .gallery-images {
    width: 100%;
    margin: 0 auto 2px;

    --carousel-button-color: #170724;
    --carousel-button-bg: #fff;
    --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
        0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);

    --carousel-button-svg-width: 16px;
    --carousel-button-svg-height: 16px;
    --carousel-button-svg-stroke-width: 2.5;
    
    --carousel-button-width: 2rem;
    --carousel-button-height: 2rem;
    --carousel-button-border-radius: 0;
}

.gallery-box .gallery-images .carousel__slide {
    width: 100%;
    padding: 0;
    
    overflow: hidden;
}

.gallery-box .gallery-images .carousel__slide[data-fancybox] {
    cursor: zoom-in !important;
}

.gallery-box .gallery-images .carousel__slide img {
    margin-bottom: 0;
}

.gallery-box .gallery-images .carousel__button.is-prev {
    left: -1rem;
}

.gallery-box .gallery-images .carousel__button.is-next {
    right: -1rem;
}

.gallery-box .gallery-images .carousel__button:focus {
    outline: none;
    box-shadow: none;
    /* box-shadow: var(--carousel-button-shadow); */
}

.gallery-box .gallery-images .carousel__button.is-prev {
    left: -0.9rem;
}
.gallery-box .gallery-images .carousel__button.is-next {
    right: -0.9rem;
}

/*

@media (min-width: 768px) {
    .gallery-box {
        max-width: 400px;
    }
}

@media (min-width: 992px) {
    .gallery-box {
        max-width: 640px;
    }
    .gallery-box .gallery-images .carousel__button.is-prev {
        left: -0.75rem;
    }
    .gallery-box .gallery-images .carousel__button.is-next {
        right: -0.75rem;
    }
}

@media (min-width: 1200px) {
    .gallery-box {
        max-width: 750px;
    }
}

*/



.gallery-box .gallery-thumbs .carousel__slide {
    width: var(--fancybox-thumbs-width);
    height: calc(var(--fancybox-thumbs-width)/(var(--fancybox-thumbs-ratio)));
    
    margin: 0.25rem;
    padding: 0;
    
    opacity: 0.5;
    overflow: hidden;
    
    cursor: pointer;
}

.gallery-box .gallery-thumbs .carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--fancybox-thumbs-border-radius);
}

.gallery-box .gallery-thumbs .carousel__slide.is-nav-selected {
    opacity: 1;
}





.gallery-thumbs .carousel__slide.is-nav-selected::after {
    opacity: .92;
}
.gallery-thumbs .carousel__slide::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;

    border-width: 2px;
    border-style: solid;
    border-color: var(--fancybox-accent-color);
    border-radius: var(--fancybox-thumbs-border-radius);

    opacity: 0;
    transition: opacity .15s ease;
}


.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after {
    opacity: .92;
}
.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
    border-width: 2px;
    border-color: #fff;
}

/*
 * -----------------------------------------------------------------------------
 *
 * .
 *
 * -----------------------------------------------------------------------------
 */

/*

.f-carousel__dots {
    --f-carousel-dot-width: 12px;
    --f-carousel-dot-height: 12px;
    --f-carousel-dot-color: #fff;
    
    bottom: 15px; /* calc(var(--f-carousel-dots-height)*-0);
}

*/

/*
.f-carousel.has-dots {
    margin-bottom: 0;
}
*/

/*
.gallery-box .carousel__dots {
    top: auto;
    bottom: 1rem;
    
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.gallery-box .carousel__dots .carousel__dot::before {
    content: "" !important;
}
*/

.gallery-box .carousel__dots .carousel__dot {
    width: 24px;
    height: 14px;    
}

.gallery-box .carousel__dots .carousel__dot::after {
    width: 14px;
    height: 14px;
  
    border: 4px solid #fff;
    border-radius: 0;
    
    background-color: #fff;
    opacity: 1;
}

.gallery-box .carousel__dots .carousel__dot.is-selected::after {
    background-color: #000;
    opacity: 1;
}