Showing a different hero image on mobile or desktop/tablet

Hi there,

My objective is to be able to display a full-width hero image on desktop and tablet and a cropped narrower version on mobile.

I think this may have worked using "hide-on-mobile" or "hide-on-desktop hide-on-tablet" could you check for me and possibly advise if there is a better way? I used two different pics just to be sure it was working as I hoped. The hide-on-desktop one is a background on a full-width container and the hide-on-mobile one is a full-width image block in full-width container. Thanks for advice on any preferred ways to do this or recommeded size (thumbnail, medium, medium-large, large) for these two purposes.

https://signmaps.org/clone-2/scientists-join-maps-coalition/

Thanks,
Pam