Dawn Theme Image Being Cutoff On Phone even after putting code in

Shopify Discussion
1 
I am tryna have a different photo as banner on phone vs different photo as banner on desktop. I tried this code:

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


But it cuts off my second pic. 
Please help me achieve the result that in third pic for my phone 
and result that's in second pic is good for my desktop.

![Screenshot 2024-01-28 161105.png|425x845](upload://bjdFi90PNoajk38e0sfIPCu6qRJ.png)

![Screenshot 2024-01-28 161147.png|1248x848](upload://4JKGTJZfYFIwvJE03Sy4E4CZYYw.jpeg)

![Screenshot 2024-01-28 161247.png|617x1039](upload://wTDeWOeOE0KWL9xb0ORLPkoNXSo.png)