Product Preview Card Component

A had challenges getting the image and container in the Desktop version to adjust together. I used a simple div container to contain the image and that seemed to work better, but the transition between mobile and desktop is rough. I would love feedback on my CSS and any suggestions, thanks!

What are some best practices for component class names? Is it better to name them based on functionality or what they are? For example, for the "Add to Cart' button, is it better to name it something like "buy", "button", or something else? I'm mainly concerned when this is at scale, and there are several buttons/pages. Thanks!