.our-projects{
    margin: auto;
    overflow: hidden;
}
.our-projects-slider{
    width: 100%;
    height: 470px;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10% 90%,
        transparent
    );
}

.our-projects-slider .our-projects-list{
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}
.our-projects-slider .our-projects-list .our-projects-item{
    width: 280px;
    height: var(--height);
    position: absolute;
    left: 100%;
    transition: filter 0.5s;
    animation: autoRun2 20s linear infinite;
    animation-delay: calc((20s / var(--quantity)) * (var(--position) - 1) - 20s)!important;
}
.our-projects-slider .our-projects-list .our-projects-item img{
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.699);
    border-radius: 4px;
}
.our-projects-slider .our-projects-list .our-projects-item a {
    position: absolute;
    background-color: transparent;
    bottom: -2px;
    left: -10px;
}
.our-projects-slider .our-projects-list .our-projects-item a .label {
    border: none;
    width: 130px;
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.514));
    -webkit-filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.514));
}
@keyframes autoRun2 {
    from {
        left: 100%;
    }
    to {
        left: calc(var(--width) * -1);
    }
}
.our-projects-slider:hover .our-projects-item{
    animation-play-state: paused!important;
    filter: grayscale(1);
}
.our-projects-slider .our-projects-item:hover{
    filter: grayscale(0);
}
@keyframes autoRun2 {
    from {
        left: 100%;
    }
    to {
        left: calc(var(--width) * -1);
    }
}
@media (max-width: 950px) {
    .our-projects .title {
        margin-bottom: 40px;
    }
    .our-projects-slider {
        width: 100%;
        height: 317px;
    }
    .our-projects-slider .our-projects-list{ 
        min-width: calc(175px * var(--quantity));
    }
    .our-projects-slider .our-projects-list .our-projects-item {
        width: 190px;
    }
}
@media (max-width: 950px) {
    .our-projects-slider {
        width: 100%;
        height: 333px;
        overflow-x: scroll;
    }
    .our-projects-slider::-webkit-scrollbar-thumb {
        background-color: transparent;
    }
    .our-projects-slider .our-projects-list .our-projects-item a {
        left: -7px;
    }
    .our-projects-slider .our-projects-list .our-projects-item a .label {
        width: 93px;
    }
}