Media Query to control a background image

Hi,

I wonder if you can help, please.

I have a block with a cover picture – my goal is to wrap a media query round that which stops the picture displaying on mobile phones. Once I would have used this CSS

/* this is the very wide graphics .hidden-979 */
@media screen and (max-width: 979px) {
.desktop {
display:none !important;
visibility: hidden;
}
}

/* this is the mobile phone graphics hidden-978 */

@media screen and (min-width: 978px) {
.mobile {
display:none !important;
visibility: hidden;
}
}

And that worked OK on other websites (not Generatepress).

I would was wondering if I could create the same on Generatepress however when you dive into the code it does not like “alien code”.
I then Googled this and thankfully
https://generatepress.com/forums/topic/how-to-remove-background-images-on-mobile/
Paul asks a similar question (amongst others)

Tom replies

As the background image is set inline, you’ll have to use !important in your CSS.
@media (max-width: 960px) {
#generate-section-3, .your-unique-section-class {
background-image: none !important;
}
}

The bit I am failing to understand is in my code which is the bit which I am targeting?

<!-- wp:generateblocks/container {"uniqueId":"4bce3ca2","innerContainer":"full","paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","paddingSyncUnits":true,"isDynamic":true} -->
<!-- wp:cover {"url":"/wp-content/uploads/2021/09/laceys-craft-butchers-03.jpg","id":30,"dimRatio":5,"minHeight":1020} -->

<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">"traditional but exciting"</p>
<!-- /wp:paragraph -->

<!-- /wp:cover -->
<!-- /wp:generateblocks/container -->

I tried

@media (max-width: 960px) {
#4bce3ca2, {
background-image: none !important;
}
}

But that does not work (plus a number of other variations)

Many thanks

Charles