.section-vitrin {
    position: relative;
    .vitrin-wrap {
        color: white;
        position: relative;
        &:before {
            content: "";
            width: 100%;
            height: calc(100% - clamp(130px, 12vw, 170px));
            min-height: 465px;
            background: #051D3D;
            position: absolute;
            border-radius: 56px;
            right: 0;
            top: calc(50% - 22px);
            transform: translateY(-50%);
        }
        .row {
            .col-12.col-xl-5 {
                padding-left: 80px;
            }
        }
        .logo-vitrin {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 24px;
            background: linear-gradient(-90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 94.69%);
            padding: 4px;
            border-radius: 100px;
            img {
                border-radius: 50%;
            }
            span:first-child {
                background: var(--color2);
                color: white;
                width: 46px;
                height: 46px;
                font-size: 16px;
                font-family: var(--DemiBold);
                border: 2px solid white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            span {
                font-size: 16px;
                font-family: var(--En);
            }
        }
        .head-vitrin {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            .title-vitrin {
                font-size: clamp(24px, 2vw, 28px);
                font-family: var(--DemiBold);
            }
            .btns.btn-more {
                i {
                    color: var(--white);
                    background: #F1F3F966;
                }
                &:hover i {
                    color: var(--white);
                    background: var(--color2);
                }
            }
        }
        .attribute-vitrin {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: clamp(20px, 3vw, 32px);
            li {
                display: flex;
                gap: 10px;
                font-size: 14px;
                p {
                    background: #FFFFFF1A;
                    padding: 8px 16px;
                    border-radius: 8px;
                    min-width: 110px;
                    text-align: center;
                    font-family: var(--Medium);
                }
                span {
                    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 11.94%, rgba(255, 255, 255, 0.1) 100%);
                    border-radius: 8px;
                    padding: 8px 16px;
                    width: stretch;
                    font-family: var(--DemiBold);
                }
            }
        }
    }
    .gallery-vitrin:not(.vitrin-gallery-stack) .sw--gallery {
        .swiper {
            overflow: visible;
        }
        .swiper-slide {
            transition: all .4s ease;
            position: relative;
            border-radius: 32px;
            overflow: hidden;
            img {
                border-radius: 32px;
            }
            &:before {
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                right: 0;
                backdrop-filter: blur(20px)
            }
        }
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .swiper-slide-active {
            &:before {
                content: none;
            }
        }
        .swiper-slide-next {
            transform: translate3d(238px, -19px, -200px) rotateY(0deg) rotateZ(-12deg) !important;
        }
    }
    .vitrin-gallery-stack {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: min(100%, 540px);
        min-height: 494px;
        padding: 18px 120px 48px;
        margin-inline: auto;
        overflow: visible;
        isolation: isolate;
        flex-direction: column;
        .sw--gallery {
            width: 240px;
            height: 400px;
            overflow: visible !important;
        }
        .swiper-wrapper {
            overflow: visible;
        }
        .swiper-slide {
            overflow: visible;
            border-radius: 36px;
            background: transparent;
            box-shadow: none;
            filter: none;
            opacity: 0 !important;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.35s ease, visibility 0.35s ease;
            &:before {
                content: none;
            }
        }
        .swiper-slide-active,
        .swiper-slide-next,
        .swiper-slide-prev {
            opacity: 1 !important;
            visibility: visible;
        }
        .project-gallery-card {
            display: block;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 36px;
            background: #e8eef5;
            transform: rotate(7deg);
            transition: transform 0.45s ease, filter 0.45s ease, opacity 0.45s ease, box-shadow 0.45s ease;
        }
        .swiper-slide:not(.swiper-slide-active) .project-gallery-card {
            opacity: 1;
            filter: blur(4px);
            transform: translate(-96px, -28px) rotate(-8deg) scale(0.95);
        }
        .swiper-slide-active .project-gallery-card {
            opacity: 1;
            filter: none;
            transform: translate(48px, 60px) rotate(8deg) scale(1);
        }
        .swiper-slide-prev .project-gallery-card {
            transform: translate(-112px, -32px) rotate(-8deg) scale(0.95);
        }
        .swiper-slide-next .project-gallery-card {
            transform: translate(-96px, -28px) rotate(-8deg) scale(0.95);
        }
        .swiper-slide-next,
        .swiper-slide-prev {
            z-index: 0;
        }
        .swiper-slide-active {
            z-index: 2;
            pointer-events: auto;
        }
        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0;
        }
    }
}
@media only screen and (max-width: 992px) {
    .section-vitrin {
        .vitrin-wrap {
            .head-vitrin {
                justify-content: center;
            }
            &:before {
                right: 0;
                top: 0;
                transform: unset;
            }
            .btns.btn-more {
                padding: 0;
                color: white;
                justify-content: center;
                margin-top: 24px;
            }
            .row {
                .col-12.col-xl-5 {
                    padding: 0;
                    margin-top: 24px;
                }
            }
            .logo-vitrin {
                background: none;
                justify-content: center;
                margin-top: 40px;
            }
        }
        .swiper-navigation.navigation-desktop {
            position: absolute;
            top: 46px;
            margin: 0;
            width: 100%;
            left: 0 !important;
            .swiper-nav-prev {
                position: absolute;
                right: 24px;
            }
            .swiper-nav-next {
                position: absolute;
                left: 24px;
            }
        }
    }
    .sw--vitrin {
        width: calc(100% - 32px) !important;
    }
}
@media only screen and (max-width: 991px) {
    .section-vitrin {
        .vitrin-gallery-stack {
            width: min(100vw, 320px);
            max-width: none;
            min-height: 0;
            padding: 8px 46px 24px;
            margin-inline: calc((100% - min(100vw, 320px)) / 2);
            overflow: hidden;
            .sw--gallery {
                width: min(66vw, 226px);
                height: auto;
                aspect-ratio: 237 / 396;
            }
            .swiper-slide {
                transition: visibility 0s linear;
            }
            .swiper-slide:not(.swiper-slide-active) .project-gallery-card {
                filter: blur(4px);
                transform: none;
            }
            .swiper-slide-active .project-gallery-card,
            .swiper-slide-prev .project-gallery-card,
            .swiper-slide-next .project-gallery-card {
                transform: none;
            }
        }
    }
}
@media only screen and (min-width: 992px) {
    .navigation-vitrin {
        position: absolute !important;
        top: -131px;
        left: 210px;
    }
    .sw--vitrin {
        .progress-desktop {
            position: absolute;
            left: -15px;
            top: 50% !important;
            transform: translateY(-50%);
            height: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .sw-gallery-progress {
            position: relative;
            border-radius: 100px;
            overflow: hidden;
            top: auto !important;
            left: auto !important;
            background: #FFFFFF33;
            height: 64% !important;
            width: 8px !important;
            .swiper-pagination-progressbar-fill {
                width: 100%;
                height: 100%;
                background: #fff;
                border-radius: 100px;
                transform-origin: top;
            }
        }
    }
    .section-vitrin .row {
        .col-12.col-xl-7 {
            padding: clamp(40px, 8vw, 104px) clamp(24px, 5vw, 70px) 148px 0;
        }
    }
}
.gallery-vitrin {
    height: 100%;
}
.sw-gallery-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 72px;
    position: absolute;
    bottom: 48px;
    left: auto;
    right: calc(100% - 56px);
    font-family: var(--En);
    color: #FFFFFF33;
    font-weight: bold;
}
.sw-gallery-count .sep {
    opacity: 0.5;
}
