@import url('brand-logo.css?v=202608110648');

.logoloop{
  --logoloop-gap:40px;
  --logoloop-logo-height:48px;
  --logoloop-fade-color:#fff;
  position:relative;
  width:100%;
  overflow:hidden;
}

.logoloop__track{
  position:relative;
  z-index:0;
  display:flex;
  width:max-content;
  user-select:none;
  will-change:transform;
}

.logoloop__list{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  margin:0;
  padding:12px 0;
  list-style:none;
}

.logoloop__item{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  margin-right:var(--logoloop-gap);
}

.logoloop__item img{
  display:block;
  width:auto;
  max-width:220px;
  height:var(--logoloop-logo-height);
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease;
}

.logoloop--scale-hover .logoloop__item{overflow:visible}
.logoloop--scale-hover .logoloop__item:hover img{transform:scale(1.2)}

.logoloop--fade::before,
.logoloop--fade::after{
  content:"";
  position:absolute;
  z-index:10;
  top:0;
  bottom:0;
  width:clamp(28px,8%,120px);
  pointer-events:none;
}

.logoloop--fade::before{
  left:0;
  background:linear-gradient(to right,var(--logoloop-fade-color),rgba(255,255,255,0));
}

.logoloop--fade::after{
  right:0;
  background:linear-gradient(to left,var(--logoloop-fade-color),rgba(255,255,255,0));
}

@media(max-width:560px){
  .logoloop{--logoloop-gap:30px;--logoloop-logo-height:42px}
  .logoloop__item img{max-width:180px}
}

@media(prefers-reduced-motion:reduce){
  .logoloop__track{transform:translate3d(0,0,0)!important;will-change:auto}
  .logoloop__item img{transition:none}
}