Using `picture` tag to change image between screen sizes

Keeping the image from resizing depending on the resolution was a pain. I think it has something to do with using <picture> tags instead of maybe an <img> or a <div> with background-image property.

I could not make both the image and the content area be responsive. The overlay of the image was achieved by ::before pseudo element and when flex-direction: row-reverse was applied to the card for desktop version, the pseudo had a fixed width of sorts and the image was resizing. Managed to do it by setting a min-width on picture selector but I dont think this is the way.