Turning a horizontal scroll image gallery for desktop (using vertical scroll gesture) into a vertical scroll gallery (using vertical scroll gesture))

I am trying to figure out how I can make this code turn a gallery that scrolls horizontally on desktop to a vertical scrolling gallery on mobile breakpoint sizes. I currently have it working properly for the horizontal scroll on desktop using the vertical scroll gesture, but I can’t figure out how to have the code switch to have the gallery scroll vertically on mobile breakpoints. I tried an “if else” statement (isMobile) that should check to see if the width of the screen is a certain size and then the gallery should scroll vertically but it does not work. Code setup below.

<script>
  import { gsap } from "gsap";

  let target = 0;
  let current = 0;
  let ease = 0.075;
  const isMobile = window.innerWidth <= 768;
  const sliderWrapper = document.querySelector(".slider-wrapper");
  let maxScroll = sliderWrapper?.offsetWidth - window.innerWidth;

  function lerp(start:number, end:number, factor:number) {
    return start + (end - start) * factor;
  }

  function update() {
    current = lerp(current, target, ease);

    gsap.set(".slider-wrapper", {
      x: -current,
    });

    requestAnimationFrame(update);
  }

  window.addEventListener("resize", () => {
    maxScroll = sliderWrapper?.offsetWidth - window.innerWidth;
  });

  if (!isMobile) {
    window.addEventListener("wheel", (e) => {
      target += e.deltaY;
      e.preventDefault();

      target = Math.max(0, target);
      target = Math.min(maxScroll, target);
    });
  } else {
    window.addEventListener("wheel", (e) => {
      target += e.deltaY;
        gsap.set(".slider-wrapper", {
        Y: -current,
      });
    });
  }

  update();
</script>