:root :where(fl-marquee) {
  --_marquee-duration: var(--marquee-duration, 30s);
  --_marquee-img-ratio: var(--marquee-img-ratio, auto);
  --_marquee-height: var(--marquee-height, 150px);
}

fl-marquee {
  width: max-content;
  display: flex;
  will-change: transform;
  backface-visibility: hidden;
  animation: marquee-slide var(--_marquee-duration) linear infinite paused;

  &.is-ready {
    animation-play-state: running;
  }

  &[data-direction="right"] {
    animation-direction: reverse;
  }

  &[data-ratio] img {
    aspect-ratio: var(--_marquee-img-ratio);
  }
}

.logo-marquee__img {
  flex-shrink: 0;
  width: auto;
  margin-inline: 20px;
  height: var(--_marquee-height);
  border-radius: var(--radius-normal);
}

.logo-marquee-wrapper {
  width: 100%;
  overflow: hidden;
}
.logo-marquee-wrapper__chowda {
  background: linear-gradient(109.9deg, #062F49 29.81%, #F55E55 100%);
  isolation: isolate;

  .logo-marquee-blend {
    background: #fff;
    mix-blend-mode: lighten;
    overflow: hidden;
  }

  .logo-marquee__img {
    padding-block: 2rem;
    filter: invert();
  }
}

@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media(max-width: 1050px) {
    :root {
        --marquee-height: 120px;
    }
}

@media(max-width: 600px) {
    :root {
        --marquee-height: 110px;
    }
}

@media(max-width: 393px) {
    :root {
        --marquee-height: 100px;
    }
}