.scroll {
  max-width: 800px;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}

.scroll div {
  white-space: nowrap;
  animation: scroll var(--time) linear infinite;
  animation-delay: calc(var(--time)*-1);
}

.scroll div:nth-child(2) {
  animation: scroll2 var(--time) linear infinite;
  animation-delay: calc(var(--time)/-2);
}

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

@keyframes scroll2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}

.scroll div span {
  display: inline-flex;
  margin: 10px;
  letter-spacing: 0.2em;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  transition: 0.5s;
}

.scroll div span:hover {
  background: #3fd2f9;
  cursor: pointer;
}

.imgBox div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgBox img {
  width: 120px;
  height: 120px;
  scale: 0.8;
  object-fit: scale-down;
}

.imgSlider {
  background-color: white;
  border-radius: 10px;
  box-shadow: 4px 4px 8px rgba(147, 147, 147, 0.5), -4px -4px 8px rgba(147, 147, 147, 0.5);
  padding: 10px;
}