How to use a different background image on mobile in Squarespace with new section divider feature

Password: appleton

I am attempting to use a different background image in the top main header on mobile. You can see the image is in place (the small sliver below the curved divider and above the red section) - but it is behind the image I want to swap (and not housed within the curve).

This is the CSS I am using:

@media only screen and (max-width: 640px)
 {section[data-section-id="6477887b2644316cd6cb8ff4"] {
background-image: url(https://static1.squarespace.com/static/6474e7fbb738031c56c23939/t/6490c63a6ca0e13bf8787392/1687209531282/Appleton+Home+Page+Banner+-+Mobile+test.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Thanks in advance!

Hi,

What is site url?

Shoot, I forgot to add that: https://hexaflexagon-pear-a9sh.squarespace.com/

Password: appleton

Use this new code

@media only screen and (max-width: 640px) {
    section[data-section-id="6477887b2644316cd6cb8ff4"] .section-background-canvas.background-fx-canvas {
    display: none;
}
section[data-section-id="6477887b2644316cd6cb8ff4"]  img {
    visibility: visible !important;
    content: url(https://static1.squarespace.com/static/6474e7fbb738031c56c23939/t/6490c63a6ca0e13bf8787392/1687209531282/Appleton+Home+Page+Banner+-+Mobile+test.png);
}
section[data-section-id="6477887b2644316cd6cb8ff4"] {
    min-height: unset !important;
    height: 50vh;
}
}

Thank you, I appreciate it. That did the trick!