Responsive Product preview card

Hey Sushant, Congratulations on completing this challenge... Here are some suggestions:

• Document should have one main landmark, Contain the component with <main>.

<main>
   <div class="grid">
      //...
   </div>
</main>

• An img element must have an alt attribute, to provide alternative information for an image if a user for some reason cannot view it.

• All page content should be contained by landmarks, Contain the attribution with <footer>.

<footer>
   <div class="attribution">
      //...
   </div>
</footer>

• Use REM for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed... See this article ---> CSS REM – What is REM in CSS?

• I suggest you center the component on the page with Flexbox, by giving the parent element <main> the following properties:

body {
    background-color: hsl(30, 38%, 92%);
    /* margin: 150px;         /* <---- Remove  */
    //...
}
main {       /* <--- Add */
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
 }

.grid {
    background-color: #fff;
    /* margin: 0 auto;         /* <---- Remove  */
    //...
}

Hope this help!... Keep coding👍