Mobile Section Background Image Not Being Picked Up

Hi

I have added custom css to display a background image when viewed on smaller screens.

When I view through a responsive tester and view the ource code it says the image being used is he desktop image?

Here is my code

@media only screen and (max-width: 1024px) {
	section[data-section-id="6673e1f8a3a59808965c32da"] .section-background img {
		opacity:0 !important;
	}
	section[data-section-id="6673e1f8a3a59808965c32da"] .section-background {
		background-image:url('https://static1.squarespace.com/static/5fec63b71c227637fcd74134/t/6673f279c0893213adf3ed95/1718874746151/hero-home-mobile.jpg') !important;
		background-size: contain;
		background-position: 40% 100%;
		background-repeat: no-repeat;
	}
	section[data-section-id="6673e1f8a3a59808965c32da"] .sqs-block-button-container {
		border: 1px solid red;
	}
}

What am I missing? Please view here - https://www.cn8.co.uk/new-home

Many thanks

Sorry I am also trying to change the width of the orange button, when viewed on smaller screens the text wraps.

Thanks

Thanks, I think I have sorted it now. Much appreciaed.