I'm developing a website with a maximum resolution of 1200px that gets entered to make sure that the content looks good on bigger screens. Now I'm stuck with a problem, I'm creating an animation with GSAP on hover with a series of shapes that follow the user, however the animation it's "offset" as GSAP take in consideration the entire width of the viewport rather than the fixed content size:

<main>
      <section>
            <div class="shapes">
                <div class="shape shape-1"></div>
                <div class="shape shape-2"></div>
                <div class="shape shape-3"></div>
                <div class="shape shape-4"></div>
            </div>
            <div class="content">
              <h1>Hello! Some text</h1>
            </div>
      </section>
</main>

CSS:

section {
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  padding: 0px 20px;
}

.shapes {
    position: relative;
    height: 100vh;
    max-width: 1200px;
    background: white;
    overflow: hidden;
}

.shape {
    will-change: transform;
    position: absolute;
    border-radius: 50%;
    
    $shapes: (#63A088: 600px, #56638A: 300px, #483A58: 100px);
    
    @each $color, $size in $shapes {
      &.shape-#{index($shapes, ($color $size))} {
        background: $color;
        width: $size;
        height: $size;
        margin: (-$size/2) 0 0 (-$size/2);
      }
    }
}

.content {
    top: 0;
    left: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    max-width: 1200px;
    background: white;
    mix-blend-mode: screen;
  }
  
.h1 {   
    color:black;
    margin: 0;
    text-align: center;
}

JS

window.addEventListener('mousemove', (e) => {
  const { clientX, clientY } = e

    const mouseX = e.clientX;
    const mouseY = e.clientY;


//   const mouseX = Math.round((e.clientX / window.innerWidth) * 100);
//   const mouseY = Math.round((e.clientY / window.innerHeight) * 100);
        
    gsap.to(".shape", {
      x: mouseX,
      y: mouseY,
      stagger: -0.1
    })
})

I tried to add a specific class and target the section width, but unfortunately this solution doesn't work.