:root {
    --carousel-width: 400px;
    --carousel-height: 400px;
}

.carousel {
    position: relative;
    width: var(--carousel-width);
    height: var(--carousel-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.carousel .item {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    transform: translateX(0) translateZ(-500px);
    opacity: 0;
}

.carousel .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* =========================================
   Reel Positions (Circular Loop) 
   Pos 0 = Left Front
   Pos 1 = Center Front
   Pos 2 = Right Front
   Pos 3 = Right Back
   Pos 4 = Center Back
   Pos 5 = Left Back
   ========================================= */

.carousel .item[data-pos="0"][data-side="front"] {
    width: calc(var(--carousel-width) + 200px);
    z-index: 9;
    opacity: 1;
    transform: translateX(calc(-1.2875 * var(--carousel-width))) translateZ(calc(-0.5 * var(--carousel-width))) rotateY(-30deg) scale(1);
}

.carousel .item[data-pos="1"][data-side="front"] {
    z-index: 10;
    opacity: 1;
    transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
}

.carousel .item[data-pos="2"][data-side="front"] {
    width: calc(var(--carousel-width) + 200px);
    z-index: 9;
    opacity: 1;
    transform: translateX(calc(1.2875 * var(--carousel-width))) translateZ(calc(-0.5 * var(--carousel-width))) rotateY(30deg) scale(1);
}

.carousel .item[data-pos="0"][data-side="back"] {
    top: -220px;
    z-index: 5;
    opacity: 0.1;
    transform: translateX(calc(-0.875 * var(--carousel-width))) translateZ(calc(-1.125 * var(--carousel-width))) rotateY(15deg) scale(0.75);
    transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel .item[data-pos="1"][data-side="back"] {
    top: -235px;
    z-index: 1;
    opacity: 0.1;
    transform: translateX(0) translateZ(-550px) rotateY(0deg) scale(0.75);
    transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel .item[data-pos="2"][data-side="back"] {
    top: -220px;
    z-index: 5;
    opacity: 0.1;
    transform: translateX(calc(0.875 * var(--carousel-width))) translateZ(calc(-1.125 * var(--carousel-width))) rotateY(-15deg) scale(0.75);
    transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel .item[data-pos="left-shadow"][data-side="front"] {
    width: calc(var(--carousel-width) * 0.8);
    z-index: 9;
    opacity: 1;
    transform: translateX(calc(-2.0 * var(--carousel-width))) translateZ(calc(-1 * var(--carousel-width))) rotateY(-60deg) scale(1);
    visibility: hidden;
}

.carousel .item[data-pos="right-shadow"][data-side="front"] {
    width: calc(var(--carousel-width) * 0.8);
    z-index: 9;
    opacity: 1;
    transform: translateX(calc(2.0 * var(--carousel-width))) translateZ(calc(-1 * var(--carousel-width))) rotateY(60deg) scale(1);
    visibility: hidden;
}

@media (min-width: 1180px) {

    .carousel .item[data-pos="0"][data-side="back"],
    .carousel .item[data-pos="1"][data-side="back"],
    .carousel .item[data-pos="2"][data-side="back"],
    .carousel .item[data-pos="3"][data-side="back"] {
        top: -290px;
    }
}

.carousel .item[data-pos="left-shadow"][data-side="front"] {
    width: calc(var(--carousel-width) * 0.8);
    z-index: 9;
    opacity: 1;
    transform: translateX(calc(-2.0 * var(--carousel-width))) translateZ(calc(-1 * var(--carousel-width))) rotateY(-60deg) scale(1);
    visibility: hidden;
}

.carousel .item[data-pos="right-shadow"][data-side="front"] {
    width: calc(var(--carousel-width) * 0.8);
    z-index: 9;
    opacity: 1;
    transform: translateX(calc(2.0 * var(--carousel-width))) translateZ(calc(-1 * var(--carousel-width))) rotateY(60deg) scale(1);
    visibility: hidden;
}

/* Pagination */
.pagination {
    display: flex;
    gap: 12px;
    margin-top: 40px;
    z-index: 20;
}

.pagination .dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(229, 51, 115, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination .dot:hover {
    background: rgba(229, 51, 115, 0.8);
    transform: scale(1.2);
}

.pagination .dot.active {
    background: #E53373;
    transform: scale(1.3);
}

/* Responsive */
@media (max-width: 1180px) {

    /* Decrease the carousel width and height */
    :root {
        --carousel-width: 300px;
        --carousel-height: 300px;
    }
}

@media (max-width: 768px) {

    :root {
        --carousel-width: 40vw;
        --carousel-height: 40vw;
    }

    /* Hide the 3rd element from front and all elements from back */
    .carousel .item[data-pos="2"][data-side="front"] {
        visibility: hidden;
        transform: translateX(calc(2.5 * var(--carousel-width))) translateZ(0) rotateY(0deg) scale(1);
    }

    .carousel .item[data-side="back"] {
        visibility: hidden;
    }

    /* Adjust the position of the remaining elements */
    .carousel .item[data-pos="0"][data-side="front"] {
        width: calc(var(--carousel-width));
        transform: translateX(calc(-0.60 * var(--carousel-width))) translateZ(0) rotateY(0deg) scale(1);
    }

    .carousel .item[data-pos="1"][data-side="front"] {
        width: calc(var(--carousel-width));
        transform: translateX(calc(0.60 * var(--carousel-width))) translateZ(0) rotateY(0deg) scale(1);
    }
}

@media (max-width: 500px) {

    :root {
        --carousel-width: 90vw;
        --carousel-height: 90vw;
    }

    /* Adjust the position of the 1st element */
    .carousel .item[data-pos="0"][data-side="front"] {
        width: calc(var(--carousel-width));
        transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    }

    /* Hide the 2nd element as well from front */
    .carousel .item[data-pos="1"][data-side="front"] {
        visibility: hidden;
        transform: translateX(calc(1.25 * var(--carousel-width))) translateZ(0) rotateY(0deg) scale(0.5);
    }

    /* Adjust the position of the 3rd element */
    .carousel .item[data-pos="2"][data-side="front"] {
        transform: translateX(calc(-1.25 * var(--carousel-width))) translateZ(0) rotateY(0deg) scale(0.5);
    }
}