:root {
  --marquee-width: 100%;
  --marquee-height: 80px;
  --marquee-elements-displayed: 6;
  --marquee-element-width: calc(
    var(--marquee-width) / var(--marquee-elements-displayed)
  );
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}
.marquee-wrapper {
  gap: 20px;
  display: flex;
  flex-direction: column;
}
.marquee {
  overflow: hidden;
  position: relative;
  width: var(--marquee-width);
  height: var(--marquee-height);
}
.marquee::before,
.marquee::after {
  top: 0;
  z-index: 2;
  content: "";
  height: 100%;
  width: 10rem;
  position: absolute;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to right, #040008 0%, transparent 100%);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to left, #040008 0%, transparent 100%);
}
.marquee-content {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  list-style: none;
  align-items: center;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
.marquee.reverse .marquee-content {
  animation: scrolling-reverse var(--marquee-animation-duration) linear infinite;
}
@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      calc(-1 * var(--marquee-element-width) * var(--marquee-elements))
    );
  }
}
@keyframes scrolling-reverse {
  0% {
    transform: translateX(
      calc(-1 * var(--marquee-element-width) * var(--marquee-elements))
    );
  }
  100% {
    transform: translateX(0);
  }
}
.marquee-content li {
  height: 100%;
  display: flex;
  padding: 1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--marquee-element-width);
}
.marquee-content li img {
  max-height: 60%;
  max-width: 100%;
  object-fit: contain;
  filter: invert(17%) sepia(92%) saturate(6614%) hue-rotate(258deg)
    brightness(96%) contrast(105%);
}
@media (max-width: 1199.98px) {
  :root {
    --marquee-elements-displayed: 5;
  }
}
@media (max-width: 991.98px) {
  :root {
    --marquee-elements-displayed: 4;
  }
}
@media (max-width: 767.98px) {
  :root {
    --marquee-elements-displayed: 3;
    --marquee-animation-duration: calc(var(--marquee-elements) * 5s);
  }
  .marquee::before,
  .marquee::after {
    width: 5rem;
  }
}
@media (max-width: 575.98px) {
  :root {
    --marquee-elements-displayed: 2;
  }
}