Product preview card component

@Abanoub-Ashraf1 You did an amazing job here, looking through your code I saw a few things that were pointed out to me as well

1. Don't use a h6 tag before an h2 tag(I made the same mistake here), in the css just style the different tag to get them bigger or smaller.
2. On font sizes px are fixed, making your website more responsive I would recommend rem, you can read more on rem here: https://developer.mozilla.org/en-US/docs/Web/CSS/rem
3. Just have a look the mobile img is different to the desktop img using the <picture> element can solve this read here to see how to use it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
4. Lastly your media query isn't stacking the content but rather keeping the box. I would recommend having a look at that, on tablet devices (not part of the assignment I know) it gives side scrolling just something to look at as an additional challenge.

Hope this helps :-)