Mobile banner becomes pixelated

Site URL: https://www.janglad.works/modol

Like many others I had issues with the mobile banner cropping too much, I solved this with this code:

@media screen and (max-width:640px) {  
  section[data-section-id="5fabebd25e6bfa61e3a51e64"]{
    min-height: 0 !important;
    height: 120vw;
  }
  section[data-section-id="5fabebd25e6bfa61e3a51e68"]{
    min-height: 0 !important;
    height: 60vw;
  }
}

however this results in the images becoming very pixelated, from what I understand Squarespace creates multiple version of images when you upload them and I assume the correct one isn't selected here? I also tried code to overwrite the banner so I could create a custom one for mobile from scratch but I only managed to apply a background to sections that didn't have one to begin with.

I attached an screenshot showing the problem, it's especially noticeable on the bottom image.

https://www.janglad.works/modol pw verysecurepassword