Product preview card component

If you remove margin: auto and margin-top: 1.5rem, the card will be placed in the middle of the page, because you are already using flexbox on the body, that in combination with min-heigh: 100vh is going to place the middle.

Your card is not responsive, you can do this by using flex-direction: column;.

main {
max-width: 500px;
background-color: var(--White);
display: flex; /* Change grid to flex */
/* flex-wrap: wrap; Enable wrapping for responsive layout */
justify-content: center; /* Horizontally center the content */
/* gap: 2rem; Add a gap between .product and .description */
box-shadow: 0 0.5rem 2rem 0 rgba(0, 0, 0, 0.1);
/*     margin: auto; */
/*     margin-top: 1.5rem; */
border-radius: 10px;
overflow: hidden;
}