Product preview card component by HTML, CSS

Hello SumKim,

• on the image you can do:

<picture>
<source media="(min-width: 780px)" srcset="images/image-product-desktop.jpg">     
<img src="images/image-product-mobile.jpg" alt="product-img">
</picture>

this will automatically switch the image with the given min-width on the <source> tag.

• on the button, you don't have to give it a height, and just put a padding-block with a em so it will scale based on the parents font-size,
• and make sure to use <div></div> when storing a lot of elements, not span...
• on font-sizes you can use clamp values to automatically scale based on screen width, so you don't have to set another font-size on media query,
• on the body do not use margins, just set it to:

body {
min-height: 100vh;
display: grid;
place-content: center;
}

to center the contents (or use flexbox)