I'm trying to use this background gradient and keep it centered on all screen sizes (Next.js, React, Sass)

The JSX:

      <div className="bg-gradient-container">
          <Image src={Gradient} alt=""/>
      </div>

The css styles:

.bg-gradient-container {
  position: absolute;
  top: calc((470px - 32vh)*-1);
  left: calc((1920px - 100vw)/-2);
  width: 1920px;
  z-index: -10;
  animation: appear2 3s ease-in;
}

I've been trying things for a while and can't figure it out. In the gif, when I set it to Desktop mode then it resizes fine. When it's set to mobile, it resizes keeping the entire right side of the image in frame.

The weird thing is that when I hover over the image in devtools, it says that the width is 1920x1080, and the text content is the full viewport width (even though it doesn't take up the whole viewport ??).