One image for desktop and one for mobile in specific product template

I don’t seem to have the bandwidth to try to do this dynamically so I’m thinking if I create two images and then display the correct one for the screen size I can copy and paste code where needed. Can I use code in the Custom CSS box in the admin

PAGE URL:

https://deborahwildebooks.com/products/magic-after-midlife

Theme: Studio 15.0.1

Product template: mam-complete-collection

URL for Mobile Banner
https://cdn.shopify.com/s/files/1/0655/7640/3169/files/MAM_Banner_3.jpg?v=1723341444

URL for Desktop Banner
https://cdn.shopify.com/s/files/1/0655/7640/3169/files/MAM_SkinnyBanner_clean.jpg?v=1724097363