.banner{
    width: 100%;
    min-height: 520px;
    text-align: center;
    overflow: hidden;
    position: relative;
    perspective: 1200px;
}

.banner .slider{
    --quantity: 1;
    --card-width: clamp(72px, 7vw, 105px);
    --card-height: clamp(100px, 10vw, 145px);
    --gallery-radius: clamp(285px, 34vw, 470px);
    position: absolute;
    width: var(--card-width);
    height: var(--card-height);
    top: 95px;
    left: 50%;
    margin-left: calc(var(--card-width) / -2);
    transform-style: preserve-3d;
    animation: autoRun 24s infinite linear;
}

@keyframes autoRun{
    from{
        transform: rotateX(-8deg) rotateY(0deg);
    }
    to{
        transform: rotateX(-8deg) rotateY(360deg);
    }
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform:
          rotateY(calc((var(--position) - 1) * (360deg / var(--quantity))))
          translateZ(var(--gallery-radius));
    backface-visibility: hidden;
}

.banner .slider .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* ===== ANDROID/MOBILE FIX ===== */
/* Disable 3D transforms on mobile devices */
@media (max-width: 700px){
    .banner{
        min-height: 360px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .banner .slider{
        --quantity: 1;
        --card-width: clamp(72px, 20vw, 96px);
        --card-height: clamp(98px, 28vw, 130px);
        --gallery-radius: clamp(130px, 36vw, 175px);
        position: relative;
        left: auto;
        margin-left: 0;
        top: 0;
        width: auto;
        height: auto;
        display: flex;
        gap: 15px;
        padding: 20px 15px;
        animation: none;
        transform: none !important;
        transform-style: flat;
        perspective: none;
    }

    .banner .slider .item{
        position: relative;
        inset: auto;
        transform: none !important;
        backface-visibility: visible;
        flex: 0 0 auto;
        width: var(--card-width);
        height: var(--card-height);
    }
}

@media (max-width: 480px){
    .banner{
        min-height: auto;
    }

    .banner .slider{
        padding: 15px 10px;
        gap: 10px;
    }

    .banner .slider .item{
        width: clamp(60px, 18vw, 80px);
        height: clamp(80px, 24vw, 110px);
    }
}