Responsive product preview card using flexbox

Hi Shha5!

Your solution looks good overall, a couple tweaks to the responsiveness like you said might be the only thing missing! I'll give you feedback on everything I see, and don't forget there might be many ways to get to the same results:

• It's hard to tell if your images are switching, but the end result looks fine. I personally find it easier to reason from a mobile first approach and I tend to use min-width instead of max-width. I also tend to keep the images of srcset and sizes in the same order, so it's easier to understand. Here is another way to do it, not sure if you've tried that https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#use_modern_image_formats_boldly
• Between 480 and 600px you're missing some responsiveness and your card starts to shrink and look strange. I usually get around that problem by bringing the desktop version later (once everything fits) and keeping the mobile version until then, which means the mobile version might have some space around it for a while (in certain cases you can expand things a little). Here is an example of what I mean with my recent solution https://fancy-sfogliatella-dec971.netlify.app/.
• I would try to keep only 1 media query to rule them all, specially in a project like this. Have you tried using only min-width? This is the way I think about things: look at both mobile and desktop version and notice the layout and other differences. This will help you place any extra wrappers if needed. Start by implementing the mobile version and do all changes for tablet/desktop using the min-width. I.e: mobile has display flex row, but when the viewport reaches 600px (min-width: 600px) flex-direction is now column.
• I like to use display of grid for my general container, that way I can give the main content all the space it needs and the footer can stay at the bottom. There are many ways to do this, I find flex a little tricky for this purpose sometimes, have you tried align-self: flex-end on your footer? Your footer might need to expand (maybe get rid of the flex-shrink?), and if you have a hard time keeping the footer content at the bottom, you can make the footer itself a display: flex and align things at the bottom inside.
• you're missing a cursor: pointer on the button which I'm sure you forgot.

Let me know if you have any questions, hope this helps!