Different Image for Mobile Screen - Please help

Team...

I know the subject has been beaten to death and I've read all the posts about how to do this however I still cannot figure out how to add a different image to the background of my mobile website landing screen.  I just need the image at the top in the first section...with the coffee beans to be replaced by an image that will take up the entire viewport vertically when it cuts over to mobile

My page is in development now and has not been published.  What the best way to share with you so you may assist?

Ive attached a photos with the sections names from a chrome extension

You can setup password & share url

https://koi-decagon-ecgw.squarespace.com/

testSpace123!

Add to Home > Design > Custom CSS

/* First section banner mobile */
@media screen and (max-width:767px) {
#page section:first-child .section-background img {
    visibility: hidden;
}
#page section:first-child .section-background {
    background-image: url(https://cdn.pixabay.com/photo/2020/09/02/15/14/flower-5538547__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
}

Tuan to the rescue.  Thank you my friend.  As always you saved the day :-).   _/|\_