Is there a way to add a background image for mobile only on Squarespace?

Question

Is there a way to add my mobile bg on mobile devices only? I have one for deskptop as seen on my site and one that i uploaded but is not visible.

My Squarespace site

Custom css in use

section[data-section-id="650f09564c89540d5337845f"]{
 @media (max-width:480px){
  #page .page-section:nth-child(1) .section-background img {
    opacity:0;
  }
  #page .page-section:nth-child(1) .section-background {
    background-image:url('https://static1.squarespace.com/static/650f091a61a2382c87f6d220/t/65131661cb25ed08ffec37ea/1695749732690/buy+here+%28Phone+Wallpaper%29.png ');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
 }
}

I tried the solution from insidethesquare and other solutions on their community forum yet there is absolutely NO EFFECT. The code in use now is from one of the community answers. I have tried using the collection id as well. Why is there absolutely no effect yet others have had success and how can I get the image I made for mobile to only show on mobile devices? There is one for desktop and one for mobile. I was expecting the mobile image to appear on...mobile devices.