Product Preview Card Component - Main

Hello there 👋. Good job on completing the challenge !

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

HTML 🏷️:

• Wrap the page's whole main content in the <main> tag.

• Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">.

• It's not necessary to wrap each element inside a div tag, you can use the element directly.

• The element <div class="addcartbutton"> should be a button and not a div with a anchor tag inside.

CSS 🎨:

• You should simply use min-width in the media query, I feel like you have repeated many styles without realizing it, so remove the media query with max-width and simply keep those styles as base styles, for example:

/* NOTE: Remove this media query */
/* @media only screen and (max-width: 35em) */

.right-col {
    background-color: var(--white);
    padding: 1.3rem;
    margin: 0;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 0.6em;
    border-bottom-right-radius: 0.6em;
}

@media only screen and (min-width: 35.1em)
.right-col {
    max-height: 22.7em;
    min-height: 22.7em;
    max-width: 15em;
    /* NOTE: These styles are repeated in the previous media query, if you remove the media query, there's no need to write them again. */
    /* background-color: var(--white); */
    /* margin: 0; */
    /* padding: 1.2em; */
    /* width: 100%; */
    /* height: 100%; */
    . . . 
}

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!