.vd-hover-slider-wrap {
    position: relative;
    width: 100%;
}

.vd-hover-slider-wrap .swiper {
    overflow: hidden;
}

.vd-hover-slider-wrap .swiper-slide {
    height: auto;
}

/* item utama */
.vd-hover-slide-item {
    position: relative;
    width: 100%;
    overflow: hidden;
    perspective: 1200px;
    -webkit-perspective: 1200px;
}

/* ratio system */
.vd-hover-slide-item.ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.vd-hover-slide-item.ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.vd-hover-slide-item.ratio-3-4 {
    aspect-ratio: 3 / 4;
}

.vd-hover-slide-item.ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.vd-hover-slide-item.ratio-4-5 {
    aspect-ratio: 4 / 5;
}

.vd-hover-slide-item.ratio-21-9 {
    aspect-ratio: 21 / 9;
}

/* background */
.vd-hover-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .6s ease;
    -webkit-transition: transform .6s ease;
}

.vd-hover-slide-item:hover .vd-hover-slide-bg {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

/* overlay gelap */
.vd-hover-slide-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

.vd-hover-slide-item:hover::before {
    background: rgba(0, 0, 0, 0.30);
}

/* overlay content */
.vd-hover-slide-overlay {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    max-width: calc(100% - 20px);

    transform-origin: right center;
    -webkit-transform-origin: right center;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform, opacity;
    opacity: 0;

    -webkit-transform: translateY(-50%) perspective(600px) rotateY(-120deg);
    -khtml-transform: translateY(-50%) perspective(600px) rotateY(-120deg);
    -moz-transform: translateY(-50%) perspective(600px) rotateY(-120deg);
    -ms-transform: translateY(-50%) perspective(600px) rotateY(-120deg);
    -o-transform: translateY(-50%) perspective(600px) rotateY(-120deg);
    transform: translateY(-50%) perspective(600px) rotateY(-120deg);

    -webkit-transition: all 550ms cubic-bezier(.25,.8,.25,1);
    -khtml-transition: all 550ms cubic-bezier(.25,.8,.25,1);
    -moz-transition: all 550ms cubic-bezier(.25,.8,.25,1);
    -ms-transition: all 550ms cubic-bezier(.25,.8,.25,1);
    -o-transition: all 550ms cubic-bezier(.25,.8,.25,1);
    transition: all 550ms cubic-bezier(.25,.8,.25,1);
}

.vd-hover-slide-item:hover .vd-hover-slide-overlay {
    opacity: 1;

    -webkit-transform: translateY(-50%) perspective(600px) rotateY(0deg);
    -khtml-transform: translateY(-50%) perspective(600px) rotateY(0deg);
    -moz-transform: translateY(-50%) perspective(600px) rotateY(0deg);
    -ms-transform: translateY(-50%) perspective(600px) rotateY(0deg);
    -o-transform: translateY(-50%) perspective(600px) rotateY(0deg);
    transform: translateY(-50%) perspective(600px) rotateY(0deg);
}

/* typography */
.vd-hover-slide-subheading {
    font-size: clamp(13px, 1vw, 18px);
    line-height: 1.4;
    margin-bottom: 10px;
}

.vd-hover-slide-heading {
    font-size: clamp(18px, 1.4vw, 26px);
    line-height: 1.2;
    margin-bottom: 18px;
    font-weight: 500;
}

.vd-hover-slide-link {
    display: inline-block;
    text-decoration: none;
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.4;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

.vd-hover-slide-link:hover {
    text-decoration: underline;
}

/* nav */
.vd-hover-slider-prev,
.vd-hover-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 10;
    width: 42px;
    height: 42px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    user-select: none;
}

.vd-hover-slider-prev:hover,
.vd-hover-slider-next:hover {
    background: rgba(0, 0, 0, 0.85);
}

.vd-hover-slider-prev {
    left: 10px;
}

.vd-hover-slider-next {
    right: 10px;
}

.vd-hover-slider-wrap .swiper-pagination {
    position: relative;
    margin-top: 16px;
}

/* tablet */
@media (max-width: 991px) {
    .vd-hover-slide-overlay {
        max-width: calc(100% - 24px);
    }

    .vd-hover-slider-prev,
    .vd-hover-slider-next {
        width: 38px;
        height: 38px;
    }
}

/* mobile */
@media (max-width: 768px) {
    .vd-hover-slide-overlay {
        top: auto;
        bottom: 14px;
        right: 14px;
        max-width: calc(100% - 28px);

        -webkit-transform: perspective(600px) rotateY(-120deg);
        -khtml-transform: perspective(600px) rotateY(-120deg);
        -moz-transform: perspective(600px) rotateY(-120deg);
        -ms-transform: perspective(600px) rotateY(-120deg);
        -o-transform: perspective(600px) rotateY(-120deg);
        transform: perspective(600px) rotateY(-120deg);
    }

    .vd-hover-slide-item:hover .vd-hover-slide-overlay {
        opacity: 1;

        -webkit-transform: perspective(600px) rotateY(0deg);
        -khtml-transform: perspective(600px) rotateY(0deg);
        -moz-transform: perspective(600px) rotateY(0deg);
        -ms-transform: perspective(600px) rotateY(0deg);
        -o-transform: perspective(600px) rotateY(0deg);
        transform: perspective(600px) rotateY(0deg);
    }

    .vd-hover-slide-subheading {
        margin-bottom: 8px;
    }

    .vd-hover-slide-heading {
        margin-bottom: 14px;
    }

    .vd-hover-slider-prev,
    .vd-hover-slider-next {
        width: 34px;
        height: 34px;
    }

    .vd-hover-slider-prev {
        left: 8px;
    }

    .vd-hover-slider-next {
        right: 8px;
    }
}