CSS code attempting to swap images between mobile and desktop versions of a site

Hey, 

I'm using this code to swap between two different background images on a website, but for some reason it either posts the image on all sections or comes up blank, or doesn't work at all. 

@media only screen and (max-width:767px) 
{[data-section-id="656f919dfff2281f80d63067"].section-background img {opacity:0}}
[data-section-id="656f919dfff2281f80d63067"].section-background {
  background-image: url(https://static1.squarespace.com/static/643bf7cb3a43c94afb0819f0/t/659039f2f272f37873817dfe/1703950838786/Icelandic+Pony+Large+Edit.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

This version of the code doesn't work at all 

@media only screen and (max-width:767px) 
{.section-background img {opacity:0}}
.section-background {
  background-image: url(https://static1.squarespace.com/static/643bf7cb3a43c94afb0819f0/t/659039f2f272f37873817dfe/1703950838786/Icelandic+Pony+Large+Edit.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

This version of the code half works but applies the image to every section on the page. 

and

@media only screen and (max-width:767px) 
{.section-background img {opacity:0}}
[data-section-id="656f919dfff2281f80d63067"].section-background {
  background-image: url(https://static1.squarespace.com/static/643bf7cb3a43c94afb0819f0/t/659039f2f272f37873817dfe/1703950838786/Icelandic+Pony+Large+Edit.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

This half works but no image is shown at all. 

I've tried "#page .page-section:nth-child(1)" instead of blockID but to no avail. 

Please forum your my only hope... where am I going wrong. 

thanks for your time 

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

https://josephine-emma.co.uk/

It's project site so its live. 
I thought I attached it when I made the post. I do apologise 

that worked perfectly, thank you so much.