Product-preview-card

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

center

• You have used the mobile first approach, for your component on mobile devices you have set a maximum width of 24.5rem, but for desktop you did not modify that maximum, so it is correctly centered on the horizontal axis but all its content is overflowing.

.container {
    margin-top: 8rem;
    max-width: 24.5rem; /* This value never changes. */
    . . . 
}

@media screen and (min-width: 1024px)
.container {
    display: flex;
    flex-direction: row;
    /*  In this place you should modify the maximum width so that it occupies enough for the content.:*/ 
    max-width: 600px;  /* Example values, change it*/
}

• To center an element vertically, you should use a height to its container. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.: `

main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Add this */
}

I hope you find it useful! 😄

Happy coding!