
.horizontal-carousel .carousel-icon-btn,
.vertical-carousel .carousel-icon-btn {
    position: absolute;
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    z-index: 5;
}

.horizontal-carousel .icon-top-left {
    padding-top: calc(25vh);
    left: 10vh;
}

.horizontal-carousel .icon-top-right {
    right: 10vh;
    padding-top: calc(25vh);
}

.horizontal-carousel .carousel-icon-btn img {
    width: 150px;
    height: 150px;
}

.vertical-carousel .icon-center-left {
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
}

.vertical-carousel .icon-center-right {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.vertical-carousel .carousel-icon-btn img {
    width: 150px;
    height: 150px;
}

/* Overlap carousel styles */
.overlap-carousel {
    height: clamp(260px, 45vw, 520px);
}

    .overlap-carousel .slides {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .overlap-carousel .slide {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.86);
        opacity: 0;
        width: min(78%, 980px);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,.25);
        transition: transform .45s ease, opacity .35s ease, z-index .1s linear;
    }

        .overlap-carousel .slide img {
            display: block;
            width: 100%;
            height: auto;
        }

        .overlap-carousel .slide.active {
            opacity: 1;
            z-index: 3;
            transform: translate(-50%, -50%) scale(1);
        }

        .overlap-carousel .slide.prev {
            opacity: 0.7;
            z-index: 2;
            transform: translate(calc(-50% - 26%), -50%) scale(0.92);
        }

        .overlap-carousel .slide.next {
            opacity: 0.7;
            z-index: 2;
            transform: translate(calc(-50% + 26%), -50%) scale(0.92);
        }

/* Vertical overlap carousel */
.overlap-vertical {
    height: clamp(360px, 60vw, 680px);
}

    .overlap-vertical .slides {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .overlap-vertical .slide {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.86);
        opacity: 0;
        width: min(78%, 980px);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,.25);
        transition: transform .45s ease, opacity .35s ease, z-index .1s linear;
    }

        .overlap-vertical .slide img {
            display: block;
            width: 100%;
            height: auto;
        }

        .overlap-vertical .slide.active {
            opacity: 1;
            z-index: 3;
            transform: translate(-50%, -50%) scale(1);
        }

        .overlap-vertical .slide.prev {
            opacity: 1;
            z-index: 2;
            transform: translate(-50%, calc(-50% - 26%)) scale(0.92);
        }

        .overlap-vertical .slide.next {
            opacity: 1;
            z-index: 2;
            transform: translate(-50%, calc(-50% + 26%)) scale(0.92);
        }

@@media (max-width: 768px) {
    .overlap-carousel {
        height: clamp(220px, 60vw, 420px);
    }

        .overlap-carousel .slide {
            width: 92%;
            border-radius: 14px;
        }

            .overlap-carousel .slide.prev {
                transform: translate(calc(-50% - 18%), -50%) scale(0.94);
            }

            .overlap-carousel .slide.next {
                transform: translate(calc(-50% + 18%), -50%) scale(0.94);
            }

    .overlap-vertical {
        height: clamp(300px, 70vw, 540px);
    }

        .overlap-vertical .slide {
            width: 92%;
            border-radius: 14px;
        }

            .overlap-vertical .slide.prev {
                transform: translate(-50%, calc(-50% - 18%)) scale(0.94);
            }

            .overlap-vertical .slide.next {
                transform: translate(-50%, calc(-50% + 18%)) scale(0.94);
            }
}
