/* Animations */
.marquee-custom-img-space {
  display: inline-flex;
  transition: 0.5s;
  cursor: pointer;
  width: 200px;
  height: 96px;
  padding: 1rem;
  background: white;
  box-shadow: 1px 1px 1.4px rgba(0, 0, 0, 0.25);
  margin-left: 1rem;
  border-radius: 6px;
  margin-top: 12px;
  margin-bottom: 12px;
  border: 1.4px solid #ededed;
}


.marquee-custom-img-space img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.marquee-custom {
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}


.marquee-custom-list-space:nth-of-type(1) {
  white-space: nowrap;
  animation: animate var(--time) linear infinite;
  animation-delay: calc(var(--time) * -1);
}


.marquee-custom-list-space:nth-of-type(2) {
  white-space: nowrap;
  animation: animate2 var(--time) linear infinite;
  animation-delay: calc(var(--time) / -2);
}


.marquee-custom--switch .marquee-custom-list-space:nth-of-type(1) {
  animation: animate3 var(--time) linear infinite;
  animation-delay: calc(var(--time) * -1);
}


.marquee-custom--switch .marquee-custom-list-space:nth-of-type(2) {
  animation: animate4 var(--time) linear infinite;
  animation-delay: calc(var(--time) / -2);
}


.marquee-custom:hover .marquee-custom-list-space {
  animation-play-state: paused;
}


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


  100% {
    transform: translateX(-100%);
  }
}


@keyframes animate2 {
  0% {
    transform: translateX(0%);
  }


  100% {
    transform: translateX(-200%);
  }
}


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


  100% {
    transform: translateX(100%);
  }
}


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


  100% {
    transform: translateX(0%);
  }
}