I have a problem with horizontal scroll, everything works fine on the desktop, problem appears on devices with touchscreen (try devtools in responsive mode). the page starts scrolling vertically and there is a problem of strange arrangement of sections on the page. Link to the page (open dev tools and check responsive mode) https://thebar.testuj.org.pl/ My scroll trigger code:

export default function Fullpage() {
   gsap.registerPlugin(ScrollTrigger);

   useEffect(() => {
      const sections = gsap.utils.toArray(".slide");
      let maxWidth = 0;

      const getMaxWidth = () => {
         maxWidth = 0;
         sections.forEach((section) => {
            maxWidth += section.offsetWidth;
         });
      };

      getMaxWidth();

      ScrollTrigger.addEventListener("refreshInit", getMaxWidth);

      gsap.to(sections, {
         x: () => `-${maxWidth - window.innerWidth}`,
         ease: "none",
         scrollTrigger: {
            trigger: ".parent",
            pin: true,
            scrub: true,
            end: () => `+=${maxWidth}`,
            invalidateOnRefresh: true,
            autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"
         },
      });

   });
   return (
      <div className="parent flex flex-nowrap">
         <First />
         <Second />
         <Third />
         <Fourth />
         <Fifth />

         <Sixth />
         <Seventh />
         <Eighth />
         <Ninth />
         <Tenth />
         <Eleventh />
        
      </div>
   );
}