.hbs-scroller {
  --hbs-duration: 30s;
  --hbs-gap: 48px;
  --hbs-height: 48px;
  --hbs-direction: normal;
  overflow: hidden;
  width: 100%;
}

/* Place the shortcode in an Elementor full-width section for an edge-to-edge strip. */
.hbs-scroller--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hbs-scroller__track {
  display: flex;
  width: max-content;
  animation: hbs-scroll var(--hbs-duration) linear infinite;
  animation-direction: var(--hbs-direction);
  will-change: transform;
}

.hbs-scroller__group {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--hbs-gap);
  margin: 0;
  padding: 0 var(--hbs-gap) 0 0;
  list-style: none;
}

.hbs-scroller__item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

.hbs-scroller__item img {
  display: block;
  width: auto;
  max-width: min(240px, 45vw);
  height: var(--hbs-height);
  object-fit: contain;
}

.hbs-scroller--pause:hover .hbs-scroller__track,
.hbs-scroller--pause:focus-within .hbs-scroller__track {
  animation-play-state: paused;
}

@keyframes hbs-scroll {
  /* The track contains four identical logo groups, so one loop moves one group. */
  to { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
  .hbs-scroller__track { animation-play-state: paused; }
}