Product review card: flexbox, grid, figure, picture

1. How to name color variables? primary, neutral, cornflower, blue, ...?
2. When to use %? I use rem/em in most cases and px for margin/padding
3. I put everything in figcaption, is that right? Because I think all of the information is about the picture, so they are all caption.
4. Is there too much explicit width? including max-width and max-height
5. Better ways to write HTML & CSS: semantics, too many div?, class usage, CSS code refactoring

Any comments are welcomed! Thanks for reading this submission