.logo-scroll {
  position: relative;
  width: 100vw;
  z-index: 1;
  margin: 0;
}

.logo-scroll__wrap {
  display: flex;
  width: calc(var(--logo-count) * (var(--logo-width) + var(--logo-gap)));
}

.logo-scroll__wrap > figure {
  flex: 0 0 var(--logo-width);
  height: auto;
  margin-right: var(--logo-gap);
  align-content: center;
}

.logo-scroll__wrap > figure:last-child {
  margin-right: 0;
}

/* Left to Right scrolling */
.scroll-ltr .logo-scroll__wrap {
  animation: scrollTextLTR var(--scroll-speed) infinite linear;
}

@keyframes scrollTextLTR {
  0% {
    transform: translateX(calc(-1 * var(--logo-count) * (var(--logo-width) + var(--logo-gap))));
  }
  100% {
    transform: translateX(0);
  }
}

/* Right to Left scrolling */
.scroll-rtl .logo-scroll__wrap {
  animation: scrollTextRTL var(--scroll-speed) infinite linear;
}

@keyframes scrollTextRTL {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--logo-count) * (var(--logo-width) + var(--logo-gap))));
  }
}


/* Media query for screens <= 767px */
@media screen and (max-width: 767px) {
  :root {
    --logo-width: 150px;  /* Adjust this value to your preferred mobile size */
    --logo-gap: 50px;    /* Adjust the gap for mobile if needed */
  }

  .logo-scroll {
    padding: 50px 0;  /* Reduce padding for mobile if desired */
  }

  /* Adjust animation duration for smoother scrolling on mobile */
  .scroll-ltr .logo-scroll__wrap,
  .scroll-rtl .logo-scroll__wrap {
    animation-duration: calc(var(--scroll-speed) * 0.7);
  }
}