body{
    --carousel-card-size: 500px;
}
@media (max-width: 1400px) {
    body{
        --carousel-card-size: 400px;
    }
}
@media (max-width: 1000px) {
    body{
        --carousel-card-size: 300px;
    }
}
@media (max-width: 600px) {
    body{
        --carousel-card-size: 200px;
    }
    #ojo-action-wrapper{
        margin-bottom: -2rem;
    }
}

.image-carousel{
    position: relative;
    height: calc(var(--carousel-card-size) + 100px);
    width: 100%;
    perspective-origin: center center;
    perspective: 1000px;
    overflow: hidden;
}

.image-carousel > div{
    height: var(--carousel-card-size);
    width: var(--carousel-card-size);
    padding: calc(var(--carousel-card-size) * 0.075);
    position: absolute;
    top: 20px;
    left: calc(50vw - calc(var(--carousel-card-size) * 0.575));
    transition: transform 0.5s ease, height 0.5s ease;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.image-carousel img, .image-carousel video{
    height: 100%;
}

.image-carousel-item-0{
    --x-rot: 0deg;
    --y-rot: 0deg;
    z-index: 1;
    transform: rotateX(var(--x-rot)) rotateY(calc(var(--y-rot) + 40deg)) translateX(calc(-1 * var(--carousel-card-size))) scale(0.5);
    background-image: url("../assets/plaxite-frame3_dark.png");
}
.image-carousel-item-1{
    --x-rot: 0deg;
    --y-rot: 0deg;
    z-index: 2;
    transform: rotateX(var(--x-rot)) rotateY(calc(var(--y-rot) + 20deg)) translateX(calc(-0.5 * var(--carousel-card-size))) scale(0.7);
    background-image: url("../assets/plaxite-frame3_dark.png");
}
.image-carousel-item-2{
    --x-rot: 0deg;
    --y-rot: 0deg;
    z-index: 10;
    transform: rotateX(var(--x-rot)) rotateY(var(--y-rot));
    background-image: url("../assets/plaxite-frame2_dark.png");
}

.image-carousel-item-3{
    --x-rot: 0deg;
    --y-rot: 0deg;
    z-index: 2;
    transform: rotateX(var(--x-rot)) rotateY(calc(var(--y-rot) - 20deg)) translateX(calc(0.5 * var(--carousel-card-size))) scale(0.7);
    background-image: url("../assets/plaxite-frame3_dark.png");
}
.image-carousel-item-4{
    --x-rot: 0deg;
    --y-rot: 0deg;
    z-index: 1;
    transform: rotateX(var(--x-rot)) rotateY(calc(var(--y-rot) - 40deg)) translateX(var(--carousel-card-size)) scale(0.5);
    background-image: url("../assets/plaxite-frame3_dark.png");
}