.carousel {
  overflow: hidden;
  position: relative;
}
.carousel .track {
  display: flex;
  align-items: center;
  gap: var(--image-gap);
  will-change: transform;
  animation: carousel var(--duration, 30s) linear infinite;
  width: -moz-max-content;
  width: max-content;
}
.carousel .track img {
  height: calc(var(--image-size) * var(--scale, 1));
  width: auto;
}
body.elementor-editor-active .carousel .track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .carousel .track {
    animation-play-state: paused;
  }
}

@keyframes carousel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - var(--image-gap) / 2));
  }
}