@-webkit-keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Podesi dimenzije i izgled slider kontejnera */
.slider {
  background-color: #fff;
  height: fit-content;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 69vw;
  margin-top: 10vh;
}

/* Dodaj gradijente levo i desno za efekat senke kao u originalu */
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 20vh;
  position: absolute;
  width: 400px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

/* Omogućava beskonačno pomeranje */
.slide-track {
  display: flex;
  width: calc(24 * 8vw); /* 22 slika x 9vw = 198vw */
  -webkit-animation: scroll 40s linear infinite;
  animation: scroll 40s linear infinite;
}

.slide {
  height: fit-content;
  width: fit-content;
}

.slide img {
  width: 8vw;
  height: auto;
  filter: saturate(0.4);
  transition: .5s;

}


.slide:hover img {
  width: 8vw;
  height: auto;
  filter: saturate(1);
  transition: .5s;

}

@media(max-width: 550px){

  .slider {
    width: 100vw;
    margin-top: 10vh;
  }


  .slide-track {
    display: flex;
    width: calc(24 * 60vw); /* 22 slika x 9vw = 198vw */
    -webkit-animation: scroll 40s linear infinite;
    animation: scroll 40s linear infinite;
  }


  .slide img {
    width: 60vw;
    height: auto;
    filter: saturate(1);
  
  }

  /* gradijenti */
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 20vh;
  position: absolute;
  width: 0px;
  z-index: 2;
}

}