Hide background (banner) image on mobile while also re-organizing section with CSS in SquareSpace 7.0

Trying to optimize for mobile, I have some code in the first section of the page that I'm trying to use to:

1. Hide the desktop background image
2. Replace the image with a new one on mobile
3. Re-organizing the section to stack the images/text, etc. instead of displaying as a background

So far, I have the new image showing up on mobile, and the elements are stacking via the flex code. But, I can't for the life of me figure out how to hide the original background image in the desktop version. I've tried every variation of the code I can find (using opacity, hidden tag, etc.) and can't seem to get it to disappear. Here is the code in question as I have it now, any ideas on how to get this to work in 7.0?

 

<style> 
@media screen and (max-width:640px) {

#section-background img {opacity: .1;}
  
#new-page-4 {
  min-height:initial !important;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  background-color:#fff; //change as needed
  -webkit-box-orient:vertical;
  -webkit-box-direction:reverse;
      -ms-flex-direction:column-reverse;
          flex-direction:column-reverse;
  
  .Index-page-image {
    position:relative;
    height:40vh;
    background-image: url(https://static1.squarespace.com/static/606b7f0d50868d69372d1aed/t/645520402e00c8148fedcbda/1683300418222/banner-image-woman-on-laptop-mobile.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 99;
  }
  
  .Index-page-content {
    min-height:initial !important;
    padding-top:10px;
  }

  h1,h2, h3,p {
   color:white;
 }
  
}
}
</style>

What is site url? We can check code easier

@tuanphan not sure why it's not showing up as I keep including it in the 'URL' field in the OP. Regardless, here is the URL:

https://curalinc.com/fmlalinc

Do you still need help?