logo-scroller {
  --logo-width: 120px;
  --scroll-duration: 25s;
  display: block;
  position: relative;
  overflow: hidden;
  min-height: clamp(125px, 15vw, 145px);
}
@media (hover: hover) {
  logo-scroller:hover ul {
    animation-play-state: paused !important;
  }
}
logo-scroller ul {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: var(--min-width);
  --min-width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
logo-scroller ul + ul {
  display: none;
}
logo-scroller ul li {
  position: relative;
  height: 100%;
  display: flex;
  place-content: center;
  place-items: center;
}
logo-scroller ul li a {
  text-decoration: none;
  display: block;
  height: inherit;
  display: flex;
  place-content: center;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
  border: 1px solid transparent;
  transition: border-color 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
logo-scroller ul li a::after {
  content: attr(data-name);
  white-space: nowrap;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  place-items: center;
  place-content: center;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  left: 50%;
  background: rgba(255, 255, 255, 0.8);
  font: normal 900 1.7em / 1.1 "Helvetica Neue", "Helvetica", sans-serif;
  color: #e8559a;
  font-size: 0.9em;
  padding: 5px 10px;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: transform 0.2s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
@media (hover: hover) {
  logo-scroller ul li a:hover::after {
    --title-y-position: calc(-100% - 8px);
    opacity: 1;
  }
  logo-scroller ul li a:hover img {
    opacity: 0.5;
    filter: grayscale(1);
  }
}
logo-scroller ul img {
  max-width: var(--logo-width);
  min-width: 100px;
  max-height: calc(var(--logo-width) / 100 * 50);
  width: 15vw;
  transition: filter 0.2s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
@supports (selector(:has(*))) {
  logo-scroller:has(ul + ul) {
    display: flex;
  }
  logo-scroller:has(ul + ul) ul {
    --min-width: auto;
    justify-content: space-around;
    flex-wrap: nowrap;
    animation: logo-scroller var(--scroll-duration) linear 0s infinite normal forwards;
  }
  @keyframes logo-scroller {
    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }
  @media (min-width: 1341px) {
    logo-scroller:has(ul + ul) ul {
      --min-width:100vw;
    }
  }
  logo-scroller:has(ul + ul) ul + ul {
    display: flex;
  }
}
/*# sourceMappingURL=../sourcemaps/components/logo-scroller.css.map */