Product Preview Card Component

Hey, I like what you have done here, Some things stand out to me,

•   object-fit: cover;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 200px;
    height: 100%;
    max-height: 600px;
    border-radius: var(--main-border-radius) var(--main-border-radius) 0 0;```
  

• Changing your max-width: 200px to max-width: 100%, max-height: 600px; to max-height: 100%; and removing height: 100%; and width: 100%; because they are now redundant, will make your image more responsive.
• Using max-width: 100% or min-width: 100% is way more responsive than just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
• You should avoid using ID selectors # and use class="" Instead because #ID is usually used for JavaScript or other reasons not styling.
• You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
• Another great resource for px to rem converter.
• Line height is usually unitless instead of line-height: 150%; should use line-height: 1.5; this means it is 1.5 x the font-size, unitless value ensures that the line height will scale proportionately.
• You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset
• Check out this article from a Frontend mentor dev about responsive-meaning.
• When on a mobile screen your <img> is meant to change to the second <img> you can do this using a <picture> element.
• Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.

I hope some of this helps, Really give those articles a good read and try to understand responsive web design, Happy coding look forward to seeing more from you!