.infinite-scroller {
    height: 130vh;
    width: 100%;
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .item {
        height: 50vh;
        border-radius: 40px;
        position: relative;
        width: 100%;
    }
}

.infinite-scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(180deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(180deg, transparent, white 20%, white 80%, transparent);
}

.infinite-scroller[data-animated="true"] .scroller__inner {
    width: 100%;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
    cursor: move;
}

.infinite-scroller[data-direction="down"] {
    --_animation-direction: reverse;
}

.infinite-scroller[data-direction="up"] {
    --_animation-direction: forwards;
}

.infinite-scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.infinite-scroller[data-speed="slow"] {
    --_animation-duration: 40s;
}

.infinite-scroller[data-speed="medium"] {
    --_animation-duration: 30s;
}

@keyframes scroll {
    to {
        transform: translateY(calc(-50% - 0.5rem));
    }
}