.roll-list-wrapper {
  margin-top: -15vw;
}

@media screen and (max-width:600px) {
  .roll-list-wrapper {
    margin-top: -10vw;
  }
}

.roll-list .img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
background-color: #fff;
}

.roll-list .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.roll-list {
    position: relative;
    width: 100%;
    aspect-ratio: 100 / 8;
    overflow: visible;
    perspective-origin: 50% 50%;
    perspective: 50vw;
    margin: 2.5% 0;
}

.roll-item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    translate: -50% 0;
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
    perspective: 100vw;
    width: 9vw;
    animation: rotate 40s linear infinite;
}

#roll2 .roll-item {
    animation-direction: reverse;
}

@keyframes rotate {
    0% {
        left: 109%;
        transform: rotateY(-20deg) scale(1.22);
    }

    10% {
        left: 94.3%;
        transform: rotateY(-16deg) scale(1.14);
    }

    20% {
        left: 81.7%;
        transform: rotateY(-13deg) scale(1.07);
    }

    30% {
        left: 70.4%;
        transform: rotateY(-12deg) scale(1.03);
    }

    40% {
        left: 60%;
        transform: rotateY(-5deg) scale(1.01);
    }

    50% {
        left: 50%;
        transform: rotateY(0deg) scale(1);
    }

    60% {
        left: 40%;
        transform: rotateY(5deg) scale(1.01);
    }

    70% {
        left: 29.6%;
        transform: rotateY(12deg) scale(1.03);
    }

    80% {
        left: 18.3%;
        transform: rotateY(13deg) scale(1.07);
    }

    90% {
        left: 5.7%;
        transform: rotateY(16deg) scale(1.14);
    }

    100% {
        left: -9.4%;
        transform: rotateY(20deg) scale(1.22);
    }
}