How to fix mobile banner image aspect ratio issues?

[MrInappropriate]

Hello lovely people,

I have added both desktop and mobile banner images to the same banner block, and added this CSS to the block, which kind of works:

.banner__media-half:nth-child(1) {
left: 0;
right: auto;
width: 100%;
}
@media (min-width: 750px) {
.banner__media-half:nth-child(2) {
display: none;
}
}
@media (max-width: 749px) {
.banner__media-half:nth-child(1) {
display: none;
}
}

The problem is that when I squash the browser to mobile view, the banner image sticks at the same aspect ratio as the desktop image, cropping off the top and the bottom.  The mobile image is of course taller than the desktop one.

I read in another post that adding this to theme.liquid (but with my section id) fixes it, but it doesn't seem to work for me:

<style>
@media screen and (max-width: 749px){
#shopify-section-template--22152022491417__image_banner_nq7af3 .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 69rem;
}
}

</style>

This is the website I'm working on: https://mrinappropriate.co.uk/

Thank you so much for your help!

Cheers,

Dan

[MrInappropriate]

Thank you so much, I'm not very good with code, can you please tell me how I could do this?  Thank  you!

[MrInappropriate · Accepted solution]

Thank you so much for helping me out with this, but I semi-accidentally got it working using this CSS attached to the desktop banner block:

@media screen and (max-width: 967px) {
{
display: none;
}
}

And this one attached to the mobile banner block:

@media screen and (min-width: 968px) {
{
display: none;
}
}

Thank you so much for your help though, greatly appreciated!!

Cheers,

Dan