画像スクロールでスマホで見たときに折り重ならないようにしたい

CSSのみで画像を無限スクロールしたのですが、スマホで見たときに画像どうしが折り重なってしまいます。
2つめのul要素が前に出てきているのが原因だと思うのですが、スマホの時のみliやimgの幅を変更してみても解決できません。
これを折り重ならずに画像1枚分が幅いっぱい表示されるようにしたいです。
どこをどう直せばよいでしょうか。

参考にしたサイトはこちらです。
https://chocolat5.com/tips/loop-image-animation/

<div class="loop__wrap">
  <ul>
    <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/002.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
  </ul>
  <ul>
    <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/002.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
  </ul>
</div>

 .loop__wrap{
            width: 100vw;
            height: 100%;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            overflow-x: hidden;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row nowrap;
            flex-flow: row nowrap;
            overflow: hidden;

            ul{
                display: -webkit-flex;
                display: flex;
                -webkit-flex-flow: row nowrap;
                flex-flow: row nowrap;
                width: 100%;
                margin: 0;
                padding: 0;

                @include mq(md){
                    margin: 0.2px;
                }

                li{
                    width: 100%;
                    display: inline-block;


                     img{
                         display: block;
                         width: auto;
                         height: 100%;

                     }
                     img + img{
                        animation: loop2 50s linear infinite;
                     }
                }

                  &:first-child{
                      animation: loop 50s -25s linear infinite;
                      backface-visibility: hidden;
                      will-change: toransform;

                  }
                  &:hover{
                      animation-play-state: paused;
                  }
            }
             ul + ul{
                 animation: loop2 50s linear infinite;
             }
            a{
                width: auto;
                display: block;
                height: 100%;
            }
        }

レスポンシブのmixinはこちらです。

$breakpoint-sm: 357px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1024px !default;

$breakpoints: (
    'sm': 'screen and (max-width: 357px)',
    'md': 'screen and (max-width: 768px)',
    'lg': 'screen and (min-width: 1024px)'
) !default;

@mixin mq($breakpoint: md){
    @media #{map-get($breakpoints, $breakpoint)}{
        @content;
    }
}

アニメーションのmixinはこちらです

@keyframes loop{
    0%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@keyframes loop2{
    0%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to{
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

ご回答宜しくお願い致します。