Basic Product Card with CSS Grid

What are you most proud of, and what would you do differently next time?

This was my first responsive web page so I'm proud of getting it to look pretty close to the design. Next time, I want to more thoughtfully plan out the html to make sure my CSS code is efficient. For example, I think there were some places where using a class would have been more efficient than creating CSS for each element by their ID. Also some of my solutions were kind of hacky and I relied on using px as a unit so I'd like to learn how to use the other units of measurement in CSS to make the page more responsive.

What challenges did you encounter, and how did you overcome them?

I could not figure out how to get the picture and the information to be centered with no space in between with either CSS grid or flexbox whilst having them have the same width and height. I figured it out by setting each part to a specific number of pixels but I'm sure there's a more flexible way to do it.

Another challenge was when I made the screen mobile sized, the elements were not remaining centered. I used some media queries to fix that.

What specific areas of your project would you like help with?

I am super beginner at this stuff. I would love suggestions on how to make this simpler and more efficient. I'm interested in the best way to get the picture and info box centered and remaining the same size in a responsive way, maybe not using pixels as units.