Flexbox and responsive imgs with srcset, mix-blend-mode backgrounds

Hey guys!

This is my first submit to the site. I used Flexbox for the card and the <img> element with srcset and sizes attributes to make the images responsive. I also used mix-blend-mode to blend the backgrounds.

I had a couple of questions and would appreciate any general feedback/suggestions as well.

• I used the <img> element specifically because I wanted to play with responsive images, but I also feel this image could be considered decorative and could be used as a background image instead. Any thoughts on whether you would consider this image worth an <img> element, or better off as a background image?

• I was also experimenting with CSS clamp() in this build. I've used clamp() for font sizes previously, but also tried it out on width of the card and even a row-gap out of curiosity. Has anyone experimented with functions this way, and have you found a method you prefer for specific situations? Like preferring to use max() for widths, as an example. Would love to hear anyone else's ideas, or suggestions to improve what I’ve done here.

Thanks!