Product preview card component using CSS

Hello! Your solution looks excellent overall!

A few things you might want to add are the rounded corners of the card component and add overflow: hidden so the image molds into the rounded corners.

To answer your questions:

1. You can vertically center a span element by adding Flexbox to the parent element like this:

display: flex;
items-align: center;

1. Yes, it is possible to set the height of the div the same as the background image by adding background-size: cover to your div. If you are using an img element, you can also do it by adding object-fit: cover to your img element.

I hope this helps! Happy coding ✨