Product preview card

Replace <div class="section"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

To center .main on the page using flexbox, replace the height in .section with min-height: 100vh. There is no need to give .section a height value and padding value in the media query. For a responsive, in the media query give .main a max-width value.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

you can choose to use Use descriptive class names, Class names should describe what the element does, not how it looks. For example, use .btn for a button, rather than .red-btn for a red button. Minimize the use of generic class names: Avoid using generic class names like .container or .row, which may not accurately describe the purpose of the element. although HTML structure are largely subjective and can vary based on personal preferences and specific project requirements. hope this was helpful Jesse