Horizontal Scrolling Images gallery doesnt load

Site URL: https://gardenia-tuna-h4hx.squarespace.com/

Hi! I've been struggling with this for a pretty long time now, ive used css to create a horizontal scrolling images section and i made 4 of them out of a built in gallery from squarespace, but i have one issue, the marquee loads the first 6, then he stops, then on the end it loads again, creating a very tacky marquee, does anybody know how to fix this?! 
THE PASSWORD OF THE SITE IS: mohwhi
THIS IS THE CODE I USED:

#page {
  overflow-x: hidden;
}

.gallery-grid-wrapper {
  display: flex !important;
  animation: slideshow 30s linear infinite;
}

.gallery-grid-wrapper .gallery-grid-item {
  min-width: 20%;
  margin-right: 1%;
  margin-bottom: 1%;
  border-radius: 40px;
  overflow: hidden
}

/* Original right-to-left animation */
@keyframes slideshow { 
  0%   { left: 0; }
  100% { left: -225%; }
}

/* New left-to-right animation */
@keyframes slideshowReverse { 
  0%   { right: 0; }
  100% { right: -225%; }
}

/* Apply reverse animation to galleries 1 and 3 */
section[data-section-id="66e8496ee6195a4b79e21a0e"] .gallery-grid-wrapper,
section[data-section-id="66e846649e5f9b3baaf96cb8"] .gallery-grid-wrapper {
  animation-name: slideshowReverse;
}

/* Ensure galleries 2 and 4 continue to use the original animation */
section[data-section-id="66e8496ee6195a4b79e21a0e"] section[data-section-id="66e8496b0389330b07016613"].gallery-grid-wrapper,
section[data-section-id="66fe555344794d28adc6bbd0"] .gallery-grid-wrapper {
  animation-name: slideshow;
}
@media (max-width: 749px) {.gallery-grid-wrapper .gallery-grid-item{ min-width: 50%;
  margin-right: 1%;
  margin-bottom: 1%;
  border-radius: 40px;
  overflow: hidden 
  }}
@media (max-width: 749px) {.gallery-grid-wrapper{animation: slideshow 15s linear infinite;}}

mohwhi

password is incorrect now

wait try again now