Add Mobile Image option to Image Banner section in DAWN Theme

[Bubblehub]

Hi all, I'm hoping someone can point out what I'm doing wrong here please. 

I'm trying to add a simple 'Mobile Image' option to the Image Banner section in the DAWN theme. 

I have the Image Picker working etc, but media queries to hide depending on screen size just don't seem to be applying. Here's the few sections of relevant code. Any help/advice appreciated! Sorry if I'm being an idiot.. 

------------------------------
{
"type": "image_picker",
"id": "image",
"label": "Desktop Image"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile Image"
},

------------------------------

{{ section.settings.image | image_url: width: 3840 | image_tag:
loading: 'lazy',
width: section.settings.image.width,
height: image_height,
class: desktop_image,
sizes: sizes,
widths: widths,
alt: section.settings.image.alt | escape
}}

{{ section.settings.image_mobile | image_url: width: 3840 | image_tag:
loading: 'lazy',
width: section.settings.image_mobile.width,
height: image_height,
class: mobile_image,
sizes: sizes,
widths: widths,
alt: section.settings.image_mobile.alt | escape
}}

------------------------------

{% style %}

.desktop_image {
display: none;
}
.mobile_image {
display: block;
}

@media only screen and (min-width: 992px) {
.desktop_image {
display: block !important;
}
.mobile_image {
display: none !important;
}
}
{% endstyle %}