I have this piece of code I got from another user online and I am currently using it within my website. I would like to add another, but in the opposite direction. How would I go about doing that?
I am not too familiar with CSS so i apologize if this is an easy fix and I am missing something obvious but any help would be appreciated!

.marquee {
            overflow: hidden;
            position: relative;
            left: 2px;
            align-items: center;
            justify-content: center;
            height: 52px;
            width: 790px;
            overflow: hidden;
            white-space: nowrap;
        }
        

.marquee {}

        .marquee-inner {
            display: block;
            width: 3540px;
            /* max width of banner */
            position: absolute;
            animation: marquee 30s linear infinite;
            font-size: 0px;
        }

        .marquee-inner img {
            margin-right: 1px;
            margin-left: 1px;
            margin-top: 1px;
        }

        .marquee-inner span {
            float: left;
            width: 50%;
            overflow: hidden;
        }

        @keyframes marquee {
            0% {
                left: 0;
            }

            100% {
                left: -1404px;
                /* half of banner width */
            }
        }
        
        
        .marquee-inner:hover {
          animation-play-state: paused;
        }

<div class="marquee">
<div class="marquee-inner">
  <span>
    <a href="url"><img src="images/buttons/numbers.png"><img></a>
    <a href="url"><img src="images/buttons/dokodemobutton3.gif"><img></a>
    <a href="url" target="_blank"> <img alt="the absolute realm" src="images/buttons/absolute-realm.gif"></a>
    <a href="url"><img src="images/buttons/goat.gif"><img></a>
    <a href="url"><img src="/images/buttons/tiny_space.gif"></a>
    <a href="url"><img src="images/buttons/button.png"><img></a>
    <a href="url"><img src="images/buttons/wukongbutton.png"><img></a>
    <a href="url"><img src="images/buttons/startraveler.png"><img></a>
    <a href="https://goblin-heart.net/sadgrl/"><img src="https://goblin-heart.net/sadgrl/assets/images/buttons/sadgrlonline.gif"></a>
    <a href="http://cepheus.xyz" target="_blank"><img alt="click to visit cepheus" src="https://cepheus.neocities.org/img/button2.gif"></a>
</span>
<span>
<!-- copy & paste above content from span -->
</span>

</div>
</div>

I tried to change the div names & switched what I thought would reverse the flow, but it did not change.

       .neighbors {
            overflow: hidden;
            position: relative;
            left: 2px;
            align-items: center;
            justify-content: center;
            height: 52px;
            width: 790px;
            overflow: hidden;
            white-space: nowrap;
        }
        

.neighbors {}

        .neighbors-inner {
            display: block;
            width: 3540px;
            /* max width of banner */
            position: absolute;
            animation: neighbors 30s linear infinite;
            font-size: 0px;
        }

        .neighbors-inner img {
            margin-right: 1px;
            margin-left: 1px;
            margin-top: 1px;
        }

        .neighbors-inner span {
            float: left;
            width: 50%;
            overflow: hidden;
        }

        @keyframes neighbors {
            0% {
                left: -1404px;
            }

            100% {
                left: 0px;
                /* half of banner width */
            }
        }
        
        
        .neighbors-inner:hover {
          animation-play-state: paused;
        }