Responsive product card with the help of Flexbox

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

I am proud of how I leveraged Flexbox to handle the layout change between desktop and mobile. It made it so I only needed to write one line of CSS in the media query to make the layout horizontal (switching the flex-direction to row).

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

Scaling images is something I have trouble with. This time, it was a challenge on the desktop design. At first, I tried using flex-grow and flex-shrink to give the image the same width as the text container, but that didn't work. I eventually found a much easier way which was setting each of those elements' widths to 50% in the media query.

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

There is a small issue with the image scaling that happens between screen widths of 375px and 530px. I was wondering why that is happening and how to fix it.

Also, is there a better way to name my CSS variables? I feel like I'm doing that wrong.