Нужно сделать анимацию, чтобы элементы прокручивались влево и появлялись справа (без пустоты, картинки всегда движутся друг за другом)

Для справки. Использую Next.js 13.5.4, React 18, SASS 1.69.7.

Данный скрин сделан при разрешении 1920x1080. При более низких разрешениях пустота пропадает, но анимация все равно разрывается в конце. Либо же не доходит до конца и начинается заново. В общем нужно сделать так, чтоб независимо от разрешения элементы шли друг за другом без огромной пустоты в конце.

const Slider = () => {
    return (
        <div className={styles.rootWrapperSlider}>
            {
                icons.map((icons)=>{
                  return   <Image key={icons.item} className={styles.ImageSlider} src={icons.item} />
                })
            }
        </div>
    );
};

@keyframes slide {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}
.rootWrapperSlider {
  background-color: #F8F8F8;
  height: 180px;
  position: absolute;
  width: 100%;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.ImageSlider {
  width: 123px;
  height: 123px;
  margin-left:6%;
  position: relative;
  animation: slide 15s linear infinite;
}