Problem with content overflowing container on mobile when using GSAP to achieve horizontal scroll

I’m having what I assume is a styling issue with GSAP. I’m working to replicate a webflow-esque horizontal scroll section, like this: https://demo.wplit.com/oxygen-horizontal-scroll/

It all works fine on desktop (and when I resize my browser down, for that matter):
enter image description here

But if you load it on mobile (or in responsive view, for that matter) the content ends up overflowing outside the site width:
enter image description here

I’m picking that it’s an issue with the GSAP script doing something differently on mobile, but I can’t pick what, and none of my CSS changes seem to help

Here’s my GSAP setup:

    gsap.registerPlugin(ScrollTrigger)
    
    let scrollContainers = document.querySelectorAll('.scroll-container');
    
    scrollContainers.forEach((scrollContainer) => {
     
        let gallery = scrollContainer.querySelector('.gallery');
        let sectionWrap = scrollContainer.querySelector('.gallery-section .gallery-wrapper');

        gsap.to(gallery, {
          x: () => -(gallery.scrollWidth - sectionWrap.offsetWidth) + "px",

          scrollTrigger: {
            start: "center center",
            trigger: gallery,
            invalidateOnRefresh: true,
            pin: scrollContainer,
            scrub: 1,
            anticipatePin: 1,
          }
        })
        
    });

Here’s a link to the live, public website: https://ehaus.co.nz/. Scroll down to the latest news section, and open responsive view (or load on mobile) to see the issue.

Any ideas how I can resolve this?