.carousel {
    position: relative;
    width: 360px;
    height: 540px;
    perspective: 1200px;
}

.card {
    position: absolute;
    width: 360px;
    height: 540px;
    border-radius: var(--border-radius-xxl);
    border: var(--border-width-sm) solid var(--border-color-alpha-white-50);
    overflow: hidden;
    transition:
        transform 1s ease,
        opacity 0.5s ease;
    will-change: transform, opacity;
    opacity: 0.3;
    z-index: 1;
    transform-origin: center center;
}


.left {
    transform: translateX(-450px) rotateY(-15deg) scale(0.9725);
    opacity: 0.2;
    z-index: 2;
}

.center {
    transform: translateX(0);
    opacity: 1;
    z-index: 3;
    border-color: rgba(255, 255, 255, .6);
}

.right {
    transform: translateX(450px) rotateY(15deg) scale(.9725);
    opacity: 0.2;
    z-index: 2;
}

.hidden {
    transform: translateX(900px);
    opacity: 0;
    z-index: 1;
}

.cardContent {
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease;
}

.center .cardContent {
    opacity: 1;
    transition-delay: 0.2s;
}

.left .cardContent,
.right .cardContent,
.hidden .cardContent {
    opacity: 0.2;
    transition-delay: 0s;
}

@media screen and (width <= 768px) {
    .carousel {
        width: 270px;
        height: 405px;
        perspective: 900px;
    }

    .card {
        width: 270px;
        height: 405px;
        border: var(--border-width-sm) solid var(--border-color-alpha-white-50);
        border-radius: var(--border-radius-xl);
    }
}