Mobile Background Image Change on 7.0

Hi all,

I've set a background image for one page (https://www.regardingdew.com/pivoting-toward-wholeness)

And it's doesn't work on mobile. I'd love to have an alternative image if possible. Here is the code that I tried in the CSS section, and no luck (nothing updates)

@media screen and (max-width:767px) {
/* hide current image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background img {
    visibility: hidden;
}
/* set new image */
[data-section-id="5e8c390a09dbf467b60fb0c3"] .section-background {
    background-image: url(https://images.squarespace-cdn.com/content/v1/55118900e4b05b9bd93e8e97/cfbeb81f-5c7e-424c-8235-7b1af80771c1/mobile+2.png?format=2500w);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

I might have the data-section-ids wrong, those were from the code that I grabbed. Anyone know what I can try? Thank you in advance!

@Regarding Hi! Your code won't work on a Squarespace 7.0 site. You can add this code under Custom CSS to display the background image on mobile:

@media screen and (max-width:767px) {
body#collection-667598e386789159fb020b87 {
    background-image: url(https://images.squarespace-cdn.com/content/v1/55118900e4b05b9bd93e8e97/cfbeb81f-5c7e-424c-8235-7b1af80771c1/mobile+2.png?format=2500w) !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
}