.slider {
  height: 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
  background: black;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
  margin-bottom: 20px;
}

.slide-track {
  display: flex;
  width: calc(200px * 16); /* width = 16 slides * 200px each */
  animation: scroll-left 30s linear infinite;
}

.slide-track.reverse {
  animation: scroll-right 30s linear infinite;
}

.slide {
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.slide:hover img {
  filter: grayscale(0%);
}

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

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