.scrolling-images {
  --si-per-row: var(--si-per-row-pc, 1);
  display: block;
  width: 100%;
  background-color: var(--si-bg, #f9608a);
  padding-top: var(--si-pc-pt, 0px);
  padding-bottom: var(--si-pc-pb, 0px);
}

.scrolling-images .scrolling-images__viewport {
  overflow: hidden;
  width: 100%;
  container-type: inline-size;
}

.scrolling-images .scrolling-images__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: scrolling-images-marquee var(--si-speed, 30s) linear infinite;
}

.scrolling-images.is-paused .scrolling-images__track,
.scrolling-images .scrolling-images__viewport:hover .scrolling-images__track {
  animation-play-state: paused;
}

.scrolling-images .scrolling-images__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--si-gap, 0px);
  padding-right: var(--si-gap, 0px);
}

.scrolling-images .scrolling-images__item {
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  width: var(--si-item-w, calc((100cqi - (var(--si-per-row, 1) - 1) * var(--si-gap, 0px)) / var(--si-per-row, 1)));
  line-height: 0;
}

.scrolling-images.is-single .scrolling-images__item {
  width: var(--si-single-w-pc);
  max-width: 100cqi;
  min-width: 0;
}

.scrolling-images .scrolling-images__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@keyframes scrolling-images-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 959px) {
  .scrolling-images {
    --si-per-row: var(--si-per-row-m, 1);
    padding-top: var(--si-m-pt, 0px);
    padding-bottom: var(--si-m-pb, 0px);
  }

  .scrolling-images.is-single .scrolling-images__item {
    width: var(--si-single-w-m);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scrolling-images .scrolling-images__track {
    animation: none;
    transform: none;
  }
}