Product preview card component challenge

Challenge number 3 done!

In this challenge my goal was to use flexbox to create a responsive layout. However, I found that it made more sense to use media queries, because the cut-off point between the desktop and mobile layout was difficult to pinpoint. I am happy with how my solution turned out, but I do wish I could've written the css more concisely. I also wonder if it would be possible to create the layout using just flexbox (or grid), without media queries.

The most difficult part for me was getting the image right. I was struggling becauce I kept having it overflow and cause unexpected side-effects (I tried using flex-wrap with disastrous consequence). The switch between desktop and mobile images was something I was wholly unaware of even being possible, so that turned out to be a good learning moment.