How to Connect this Scrolling Feature & removing that gap?

Newbie here!

Easy Question for those with experienced eyes!

Okay, first the code (Pt 1 HTML, Pt 2 CSS, & Pt 3 JavaScript) and then my question (pt 4) at the end!

Pt 1 HTML code is:

    <!doctype html>
    <html>
    <head>
    <title>Why ain't it connecting? There's a gap. 1 should go after 5 and be a continuous loop. </title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    
    
    <div class="container">
    <div class="column"> <!-- Column 1 -->
    
    <img src="https://img.freepik.com/free-vector/shiny-golden-number-one-star-label-design_1017-27875.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1725667200&semt=ais_hybrid" width="50" height="50" alt="Column 1 Line 1" />  
                
    <img src="https://img.freepik.com/premium-photo/usa-flag-style-metallic-2-number-balloon-realistic-3d-white-background-generative-ai_69037-2774.jpg?w=900" width="50" height="50" alt="Column 1 Line 2" />              
     
    <img src="https://img.freepik.com/free-psd/pink-number-3-is-pink-background_220664-5637.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 1 Line 3" />              
     
    <img src="https://img.freepik.com/premium-photo/3d-blue-number-4-isolated-white-background_776894-170076.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 1 Line 4" />              
    
    <img src="https://img.freepik.com/premium-photo/hand-drawn-number-five-with-scribbles_1060494-68002.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 1 Line 5" />              
    </div>
    <div class="column"> <!-- Column 2 -->
    
    <img src="https://img.freepik.com/free-vector/shiny-golden-number-one-star-label-design_1017-27875.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1725667200&semt=ais_hybrid" width="50" height="50" alt="Column 2 Line 1" />              
    
    <img src="https://img.freepik.com/premium-photo/usa-flag-style-metallic-2-number-balloon-realistic-3d-white-background-generative-ai_69037-2774.jpg?w=900" width="50" height="50" alt="Column 2 Line 2" />              
    
    <img src="https://img.freepik.com/free-psd/pink-number-3-is-pink-background_220664-5637.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 2 Line 3" />              
    
    <img src="https://img.freepik.com/premium-photo/3d-blue-number-4-isolated-white-background_776894-170076.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 2 Line 4" />              
    
    <img src="https://img.freepik.com/premium-photo/hand-drawn-number-five-with-scribbles_1060494-68002.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 2 Line 5" />  
    </div>
    <div class="column"> <!-- Column 3 -->
    
    <img src="https://img.freepik.com/free-vector/shiny-golden-number-one-star-label-design_1017-27875.jpg?size=338&ext=jpg&ga=GA1.1.2008272138.1725667200&semt=ais_hybrid" width="50" height="50" alt="Column 3 Line 1" />  
                
    <img src="https://img.freepik.com/premium-photo/usa-flag-style-metallic-2-number-balloon-realistic-3d-white-background-generative-ai_69037-2774.jpg?w=900" width="50" height="50" alt="Column 3 Line 2" />  
                
    <img src="https://img.freepik.com/free-psd/pink-number-3-is-pink-background_220664-5637.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 3 Line 3" /> 
    
    <img src="https://img.freepik.com/premium-photo/3d-blue-number-4-isolated-white-background_776894-170076.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 3 Line 4" /> 
    
    <img src="https://img.freepik.com/premium-photo/hand-drawn-number-five-with-scribbles_1060494-68002.jpg?ga=GA1.1.842708263.1725738367&semt=ais_hybrid" width="50" height="50" alt="Column 3 Line 5" />  
    
    </div>
    </div>
    
    
    <script src="script.js">
    </script>
    </body>
    </html>

Pt 2 The CSS Code is:

    .container {
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    height: 500px;
    /* Adjust as needed */ }
    
    .column {
    display: flex;
    flex-direction: column;
    animation: scroll 10s linear infinite; }
    
    .column img {
    width: 100px;
    /* Adjust as needed */
    height: 100px;
    /* Adjust as needed */ }
    
    @keyframes scroll {
    0% { transform: translateY(0);   }
    
    100% {transform: translateY(-500px);
    /* Adjust based on image height */  }
    }

Pt 3 The JavaScript is:

const columns = document.querySelectorAll('.column');  columns.forEach(column => { column.addEventListener('animationiteration', () => { const firstImage = column.querySelector('img:first-child'); column.appendChild(firstImage); }); });

Pt 4:> The question:

I want these images to appear in the background of a website. 3 columns of 1-2-3-4-5 appearing vertically. Did that.

I am trying to have it scroll like a wheel. It’s scrolling.

My Problem:

The “Number 1,” should appear, IMMEDIATELY after “the Number 5” there should not be a gap. (if you run the code/run the code snipbit you should see it) It should be continuous, like a wheel. I feel like I’m in too deep at the moment and I’m missing something really easy.

My question is how do I get “the 1,” right after “the 5,” (but continually looping into 2-3-4-5-1-2-3-4-5-1-2-3-4-5-1 &) to continue the loop endlessly with no gap.

I tried fiddling with the CSS and HTML but i’m not TOO experienced with JavaScript enough to comfortably toy with it. Is this more of a JavaScript thing?

Closing Note 1:> (this question was uncorrectly edited in the staging ground and messed up how its being asked by e t h a n. i have resetted the question back to its normalcy. The person who edited the first time did not do a good job and are not helping; just conducting powermoves. leave my question alone; I am already telling you “You are not helping. You are asking me to provide a gif of my code running (that’s weird) and not even asking what I want it to do. run my code (thats why its weird; you could just run the code rather than ask someone to show you a gif of their code) and you’ll see the problem instantly.” The 1 doesnt loop after the 5, there’s a gap after the 5. the problem is:> “how to get the 1 to come immediately after the 5”)

Closing Note 2: -Don’t Edit my question. I’m the one asking it; i know what im asking. the one who edited it edited it wrong and didnt get my question correct.

-Thanks