* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #e5e5e5;
}

main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.container {
    width: 100%;
    height: var(--height);
    mask-image: linear-gradient(to right, 
    transparent,
    #000 10% 90%, 
    transparent);
}

.carrossel {
    width: 100%;
    display: flex;
    position: relative;
}

.item {
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
    animation-delay:  calc(10 / var(--quantity) * var(--delay)) !important;
    cursor: pointer;
}

.container.reverse .item {
    animation: reverseRun 10s linear infinite;
}

.item img {
    width: 100%;
}

.container:hover .item {
    animation-play-state: paused;
    filter: grayscale(1);
}

.container .item:hover {
    filter: grayscale(0);
}

@keyframes autoRun {
    from {
        left: 100%;
    }
    to {
        left: -50px;
    }
}

@keyframes reverseRun {
    from {
        left: -200px;
    }
    to {
        left: 100%;
    }
}