.scroll-carousel .main-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    height: 80vh;
    gap: 60px;
    align-items: center;
    justify-content: center;
}

.scroll-carousel .carousel-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-carousel .carousel-container {
    width: 100%;
    max-width: 520px;
    height: 70vh;
    position: relative;
    perspective: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-carousel .carousel-track {
    width: 460px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform-style: preserve-3d;
}

.scroll-carousel .carouselcard {
    position: absolute;
    width: 420px;
    height: 240px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 22px 70px rgba(0,0,0,0.35);
    transition: transform 0.85s cubic-bezier(.2,.8,.2,1), opacity 0.85s cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.15);
}

    .scroll-carousel .carouselcard img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: filter 0.85s cubic-bezier(.2,.8,.2,1);
    }

    .scroll-carousel .carouselcard.center {
        z-index: 10;
        transform: scale(1.08) translateZ(0);
        opacity: 1;
        pointer-events: auto;
    }

    .scroll-carousel .carouselcard.up-1 {
        z-index: 6;
        transform: translateY(-160px) scale(0.92) translateZ(-120px);
        opacity: 0.92;
        pointer-events: auto;
    }

    .scroll-carousel .carouselcard.up-2 {
        z-index: 2;
        transform: translateY(-320px) scale(0.82) translateZ(-320px);
        opacity: 0.70;
        pointer-events: auto;
    }

    .scroll-carousel .carouselcard.down-1 {
        z-index: 6;
        transform: translateY(160px) scale(0.92) translateZ(-120px);
        opacity: 0.92;
        pointer-events: auto;
    }

    .scroll-carousel .carouselcard.down-2 {
        z-index: 2;
        transform: translateY(320px) scale(0.82) translateZ(-320px);
        opacity: 0.70;
        pointer-events: auto;
    }

        .scroll-carousel .carouselcard.up-1 img,
        .scroll-carousel .carouselcard.up-2 img,
        .scroll-carousel .carouselcard.down-1 img,
        .scroll-carousel .carouselcard.down-2 img {
            filter: grayscale(95%);
        }

@media (max-width: 768px) {
    .scroll-carousel .main-container {
        flex-direction: column;
        height: auto;
        gap: 20px;
        max-width: 100%;
    }

    .scroll-carousel .carousel-container {
        height: 60vh;
        max-width: 360px;
    }

    .scroll-carousel .carousel-track {
        width: 360px;
    }

    .scroll-carousel .carouselcard {
        width: 320px;
        height: 180px;
    }

        .scroll-carousel .carouselcard.up-2 {
            transform: translateY(-220px) scale(0.82) translateZ(-320px);
        }

        .scroll-carousel .carouselcard.up-1 {
            transform: translateY(-120px) scale(0.92) translateZ(-120px);
        }

        .scroll-carousel .carouselcard.down-1 {
            transform: translateY(120px) scale(0.92) translateZ(-120px);
        }

        .scroll-carousel .carouselcard.down-2 {
            transform: translateY(220px) scale(0.82) translateZ(-320px);
        }
}