.hero_image-slider-wrapper {
  position: absolute;
  flex-direction: row;
  white-space: nowrap;
  will-change: transform;
  animation: slide 30s linear infinite;
  width: 300%; /* Adjust based on the number of images and their width */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

@keyframes slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-2020px, 0, 0);
  }
}

@keyframes slide-mobile-landscape {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-1140px, 0, 0); /* Adjust for mobile */
  }
}

@media (max-width: 768px) {
  /* Adjust breakpoint as needed */
  .hero_image-slider-wrapper {
    animation: slide-mobile-landscape 30s linear infinite;
  }
}

@keyframes slide-mobile {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-33%, 0, 0); /* Adjust for mobile */
  }
}

@media (max-width: 480px) {
  /* Adjust breakpoint as needed */
  .hero_image-slider-wrapper {
    animation: slide-mobile 30s linear infinite;
  }
}