#spiral {
    margin-inline: 64px;
    padding: 32px;
    background: #fff;
    position: relative;
    z-index: 9;
    z-index: 9;
    padding-bottom: 100px;
    margin-bottom: -100px;

    @media only screen and (max-width: 980px) {
        margin-inline: 10px;      
    }

    .wrap {
        perspective: 200vw;
        transform-style: preserve-3d;  
        position: relative;
        z-index: 10;
    }

    .item {
        --scroll: 0%;
        width: 70vw;
        will-change: transform;
        transition: all 1s;         
        _translate: none;
        _rotate: none;
        _scale: none;
        transform: translate3d(0px, 0px, 0px) rotateY(calc(var(--scroll) * 3.6 * 1deg));
        
        img {
            display: block;
            aspect-ratio: 2 / 3;
            border: 4px solid black;
            border-radius: 32px;
            object-fit: cover;
            width: 20vw;
            display: block;
            overflow: hidden;
            box-shadow: 1px 1px 30px #00000014;

            @media only screen and (max-width: 980px) {
                border-radius: 16px;   
            }


        }

        &:not(:first-child) img {
            margin-top: -24vw;
        }
    }
}