Double pagination

[uberoddish]

Hello, I'm using statamic to supply the content to the slides. I'm trying to figure out whats going on here but it seems like the pagination is generating more line than actual slides. In this photo I only have 2 slides but it's almost like the pagination is being generated twice. When I make the screen size smaller it goes away and only shows two line. I just want the pagination to be consistent with how many slides I have. Not sure what the issues is if anyone has any idea please let me know. Here's my code below.

<style>
    .splide__pagination__page.is-active {
        background: #333;
    }
    .splide__progress__bar {
        height: 3px;
        background: #9e9e9e;
    }
    .splide__pagination {
        bottom: -30px;
    }
    .splide__pagination__page {
        width: 30px;
        margin: 5px;
        border-radius: 0;
        height: 3px;
        opacity: 100;
    }
    .splide__pagination__page.is-active {
        background: #9e9e9e;
        
    }
</style>
<div class="md:px-2" 
    x-data="{
        init() {
            new Splide(this.$refs.splide, {
                type: 'loop',
                autoplay: 1,
                perPage: 1,
                gap: '0.5rem',
                arrows: false,
                breakpoints: {
                    640: {
                        perPage: 1,
                    },
                },
            }).mount()
        },
    }"
    >
    <section x-ref="splide" class="splide" aria-label="Slideshow">
        <div class="splide__track">
            <ul class="splide__list">
                {{ slide }}
                    <li class="splide__slide">
                        <div class="w-full splide__slide__container">
                            {{ image }}<img src="{{ url }}" alt="{{ alt }}" class="w-full md:p-4" />{{ /image }}
                            
                            <a href="{{ teaser_url }}" class="">
                                <div class="md:absolute md:top-8  md:w-4/6 md:p-6 py-4 px-2 bg-theedward-herobg text-theedward-heroText md:flex md:flex-col bg-opacity-80 justify-between sm:w-[60%] sm:min-h-[54%] lg:w-[40%] xl:w-[33%]">
                                    <h1 class="mb-4 text-3xl leading-10 md:text-5xl font-GlosaDisplayRoman text-theedward-heroText">
                                        {{ teaser }}
                                    </h1>
                                    <div class="font-black uppercase font-NewsCycle">
                                        {{ teaser_cta | strip_tags:p }}
                                        <i class="text-default-secondary fa-solid fa-caret-right"></i>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <a class="block bg-[#133744] text-white py-2 px-3 md:py-4 md:px-6 md:absolute md:right-0 md:bottom-0 hover:text-white" href="{{ slogan_url }}">
                            <div class="text-xl font-light md:text-3xl font-Merriweather">{{ slogan }}</div>
                        </a>
                    </li>
                {{ /slide }}
            </ul>
        </div>
    </section>
</div>