.lme-logo-marquee {
  --lme-side-padding: 300px;
  --lme-padding-top: 124px;
  --lme-padding-bottom: 112px;
  --lme-logo-width: 115px;
  --lme-logo-height: 52px;
  --lme-gap: 49px;
  --lme-duration: 24s;
  --lme-edge-fade: 140px;
  --lme-logo-opacity: 0.9;

  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  padding: var(--lme-padding-top) var(--lme-side-padding) var(--lme-padding-bottom);
  background: #fff;
}

.lme-logo-marquee *,
.lme-logo-marquee *::before,
.lme-logo-marquee *::after {
  box-sizing: border-box;
}

.lme-logo-marquee__title {
  margin: 0 0 50px;
  color: #0b0d1a;
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.035em;
}

.lme-logo-marquee__viewport {
  width: 100%;
  overflow: hidden;
  contain: paint;
  clip-path: inset(0);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--lme-edge-fade),
    #000 calc(100% - var(--lme-edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--lme-edge-fade),
    #000 calc(100% - var(--lme-edge-fade)),
    transparent 100%
  );
}

.lme-logo-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: lme-logo-marquee-scroll var(--lme-duration) linear infinite;
}

.lme-logo-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--lme-gap);
  padding-right: var(--lme-gap);
}

.lme-logo-marquee__item {
  display: grid;
  flex: 0 0 var(--lme-logo-width);
  width: var(--lme-logo-width);
  height: var(--lme-logo-height);
  place-items: center;
}

.lme-logo-marquee__link {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.lme-logo-marquee__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: var(--lme-logo-opacity);
}

.lme-grayscale-yes .lme-logo-marquee__image {
  filter: grayscale(1);
}

.lme-logo-marquee__placeholder {
  color: #5c5e68;
  font: 700 18px/1 Inter, Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
  opacity: var(--lme-logo-opacity);
}

@keyframes lme-logo-marquee-scroll {
  to {
    transform: translateX(-33.333333%);
  }
}

@media (max-width: 900px) {
  .lme-logo-marquee {
    --lme-side-padding: 60px;
    --lme-edge-fade: 80px;
  }
}

@media (max-width: 767px) {
  .lme-logo-marquee {
    --lme-side-padding: 20px;
    --lme-padding-top: 72px;
    --lme-padding-bottom: 70px;
    --lme-edge-fade: 40px;
    --lme-duration: 18s;
  }
}