Replace section background image with image sized for mobile

Hey team - I'm attempting to code a background image replacement for the first section when the following page is viewed on mobile: https://www.peterzizzo.com/dare-to-suck

I've attempted the following code but I'm afraid I'm not targeting the right section id as I can't get the background image to adjust when viewed in mobile. Could someone please assist? Thanks!

// mobile background replace
section[data-section-id="662817ff05ecb2537fa28cbd"] {
 @media only screen and (max-width:640px){
  .section-background img {
    opacity:0;
  }
 .section-background {
    background-image:url('https://static1.squarespace.com/static/601982cee0432c611d54064e/t/665280a48c8f5d0e8086219c/1716682918770/pete-zizzo-demons-graphic-mobile-animated-2304x4096.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
 }
}

That works, thank you!