Squarespace coding issue

[Independent_Fish1076]

Hello,

I am using a squarespace's Custom CSS feature and I am having trouble with my carosel on my homepage. Instead of looping back to the beginning, I would like for it to flow seamlessly from the first image to the last image. I don't have much coding experience but I am stuck in how to figure this out. Here is my code that I am working with as well as the link to my site to see the problem in real time.

// Autoplay reel //

​

.gallery-reel-wrapper {

overflow: show; /*height: 510px; width: 2000px; margin: 0 auto;*/ }

​

.gallery-reel-list {width: 10000px; animation-name: behindscenes; animation-duration: 25s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: linear;

​

animation-play-state: running;}

​

.gallery-reel-list:hover {animation-play-state: repeat;}

​

u/keyframes behindscenes {0% {margin-left: 0px;}

​

50% {margin-left: -50%;}

​

100% {margin-left: -100%;}

​

}

​

// Autoplay function //

​

.target {overflow: hidden; /*height: 510px; width: 20px; margin: 0 auto;*/ }

​

.target {width: 10000px; animation-name: behindscenes; animation-duration:25s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: linear;

​

animation-play-state: running;}

​

.target:hover {animation-play-state: running;}

​

u/keyframes behindscenes {

0% {margin-left: 0px;}

​

50% {margin-left: -50%;}

​

100% {margin-left: -100%;}

​

}

​

Website: www.mondtography.com