/* slider */

.wrapper {
    --width: 30vw;
    --height: 24vw;
    --quantity: 4;
}

.wrapper {
    width: 100%;
    overflow: hidden;
}

.wrapper .slider {
    display: flex;
    width: 100%;
    height: calc(var(--height) + 10vh);
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
    gap: 1vw;
}

.box-project {
    width: var(--width) !important;
    height: var(--height) !important;
    position: absolute;
    left: 100%;
    animation: autoRun 30s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc((30s / var(--quantity)) * (var(--position) - 1) - 30s) !important;
}

@keyframes autoRun {
    from {
        left: 100%;
    }

    to {
        left: calc(var(--width) * -1);
    }
}

.wrapper:hover .box-project {
    filter: grayscale(1);
    animation-play-state: paused !important;
}

.wrapper .box-project:hover {
    filter: grayscale(0);
}

/* responsive */
@media (max-width: 1366px) {
    .wrapper {
        --width: 34vw;
        --height: 30vw;
        --quantity: 4;
    }
}

@media (max-width: 1024px) {
    .wrapper {
        --width: 40vw;
        --height: 38vw;
        --quantity: 4;
    }
}

@media (max-width: 768px) {
    .wrapper {
        --width: 90vw;
        --height: 80vw;
        --quantity: 4;
    }

    .wrapper .slider {
        gap: 0.5vw;
    }
}

/* slider end */