.case-gallery {
    overflow: hidden;

    &.has-video {
        .case-gallery__body {
            // min-width: 1400px
            @include _LDesktop {
                margin-top: 40px;
            }
        }

        .case-gallery__header {
            // min-width: 576px
            @include _SLMobile {
            }

            // min-width: 768px
            @include _Tablet {
            }

            // min-width: 992px
            @include _Laptop {
            }
            // min-width: 1024px
            @include _XSDesktop {
                display: grid;
                grid-template-columns: 1fr 1.27fr;
                gap: 20px;

                .case-gallery__header-wrapper {
                    max-width: 54%;
                }
            }

            // min-width: 1200px
            @include _Desktop {
                grid-template-columns: 1fr 1.42fr;
            }

            // min-width: 1400px
            @include _LDesktop {
                grid-template-columns: 1fr 1.59fr;

                gap: 102px;
            }

            // min-width: 1600px
            @include _HDesktop {
            }
        }
    }

    &__header {
    }

    &__header-wrapper {
    }

    &__title {
        color: cl("accent");
    }

    &__subtitle {
        margin-top: 16px;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-top: 24px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            margin-top: 32px;
        }

        // min-width: 1200px
        @include _Desktop {
            margin-top: 24px;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 32px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__video {
        margin-top: 32px;

        position: relative;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            margin-top: 0;
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__video-preview {
        display: flex;

        &.active {
            &::before {
                display: none;
            }
        }

        &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;

            background-color: rgba($color: #000000, $alpha: 0.3);
            pointer-events: none;
        }

        img,
        iframe {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;

            aspect-ratio: 340 / 195;
        }
    }

    &__video-play {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 32px;
        height: 32px;

        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        cursor: pointer;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            width: 48px;
            height: 48px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
            width: 83px;
            height: 83px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__body {
        margin-top: 32px;
        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
            margin-top: 40px;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 60px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__slider {
        position: relative;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            overflow: visible;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__slider-wrapper {
    }

    &__slide {
        opacity: 0.3;

        transition: 0.3s opacity;

        &.swiper-slide-active {
            opacity: 1;
        }

        img {
            width: 100%;
            height: 100%;

            object-fit: cover;

            aspect-ratio: 340 / 236;

            // min-width: 576px
            @include _SLMobile {
            }

            // min-width: 768px
            @include _Tablet {
                aspect-ratio: 570 / 415;
            }

            // min-width: 992px
            @include _Laptop {
            }

            // min-width: 1024px
            @include _XSDesktop {
                aspect-ratio: 730 / 415;
            }

            // min-width: 1200px
            @include _Desktop {
                aspect-ratio: 740 / 415;
            }

            // min-width: 1400px
            @include _LDesktop {
            }

            // min-width: 1600px
            @include _HDesktop {
            }
        }

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            max-width: 82.9%;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            max-width: 77.4%;
        }

        // min-width: 1200px
        @include _Desktop {
            max-width: 66%;
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__pagination {
        display: flex;
        justify-content: center;
        margin-top: 16px;

        --swiper-pagination-color: #{cl("accent")};
        --swiper-pagination-bullet-width: 31px;
        --swiper-pagination-bullet-height: 6px;
        --swiper-pagination-bullet-border-radius: 2px;
        --swiper-pagination-bullet-inactive-color: #fff;
        --swiper-pagination-bullet-inactive-opacity: 0.1;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            margin-top: 24px;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
            margin-top: 32px;
        }

        // min-width: 1200px
        @include _Desktop {
            margin-top: 24px;
        }

        // min-width: 1400px
        @include _LDesktop {
            margin-top: 40px;
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__navigation {
        position: absolute;
        z-index: 1;

        width: 100%;
        top: 50%;
        transform: translateY(-50%);

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

        padding: 0 8px;

        pointer-events: none;

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            padding: 0;
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
            max-width: 83.3%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        // min-width: 1400px
        @include _LDesktop {
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }

    &__arrow {
        pointer-events: visible;
        width: 32px;
        height: 32px;

        background-color: cl("accent");
        border-radius: 4px;

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

        cursor: pointer;

        svg {
            width: 14px;
        }

        // min-width: 576px
        @include _SLMobile {
        }

        // min-width: 768px
        @include _Tablet {
            width: 40px;
            height: 40px;

            svg {
                width: 16px;
            }
        }

        // min-width: 992px
        @include _Laptop {
        }

        // min-width: 1024px
        @include _XSDesktop {
        }

        // min-width: 1200px
        @include _Desktop {
        }

        // min-width: 1400px
        @include _LDesktop {
            // width: 83px;
            // height: 83px;

            // svg {
            //     width: 16px;
            // }
        }

        // min-width: 1600px
        @include _HDesktop {
        }
    }
}
