.hwt-logo-marquee{
  
  --h: 5em;      
  --gap: 8.75em;   
  --dur: 45s;     
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hwt-logo-marquee::before,
.hwt-logo-marquee::after{
  content: "";
  position: absolute; top: 0; bottom: 0; width: 8%;
  pointer-events: none;
  z-index: 1;
}

.hwt-lm{
  height: var(--h);
  position: relative;
}

.hwt-lm__track,
.hwt-lm__track *{
  transition: none !important;
}

.hwt-lm__track{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 100%;
  will-change: transform;
}

.hwt-lm__item{
  list-style: none;
  flex: 0 0 auto;
  height: 100%;
  
}

.hwt-lm__item img{
  display: block;
  height: 100%;
  width: auto;
}

.hwt-lm__item{ filter: grayscale(1); transform: scale(.94); }
.hwt-lm__item.is-center{

}

.hwt-logo-marquee{
  
  --fade-inner: 42%; 
  --fade-outer: 58%; 

  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black var(--fade-inner),
    black var(--fade-outer),
    transparent 100%
  );
  mask-image: linear-gradient(to right,
    transparent 0%,
    black var(--fade-inner),
    black var(--fade-outer),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hwt-lm__track, .hwt-lm__track * { transition: none !important; }