Separate Images For Desktop and Mobile with Separate Aspect Ratios (Dawn 9.0.0)

Hey guys!

I am having an issue where I can’t figure out how to make the mobile image have it’s own aspect ratio. It is adapting to the desktop size. I would like for it to be the same aspect ratio as itself.

I’m using Dawn 9.0.0.

Website: Wholesome Boy

I used this code to separate the images:

.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
@media screen and (max-width: 749px) {
.banner__content::before{
padding-bottom: 150% !important;
}
}

But it doesn’t seem to be working!

Does anyone have a fix for this?