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

Hi. Have you solved this yet?

10 hours ago, tuanphan said:

Hi. Have you solved this yet?

Hi! Not yet

On 12/6/2020 at 1:11 AM, tuanphan said:

Hi. Have you solved this yet?

This actually seems to be caused by the WebGL effects and not the CSS code I used as disabling them fixes it. Is this a bug on Squarespace's end? Maybe forcing a different banner for mobile can still fix it? Or as a last ditch: is there any way to disable the WebGL Image effects on mobile only?

Thanks a ton in advance!