CSS Flexbox + Figma Design - Blog Preview Card

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

I am getting better are reading the Figma designs. This provides insight into card sizes and padding as well as the exact font sizes, line height etc...

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

I was struggling for a while figuring out how to add margin around the card since it had a box shadow and I learned that box shadow + margin don't respect each other, therefore I had to add additional margin on the box shadow side.

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

I created a class called "card-container" and put it on the main HTML element. Would it be better to create a div or section and give it a class rather then adding that class on the main tag?

I added the colors to the :root of the CSS file for reusability. What is the proper way to do it for font-family or font-weights?

Basically how can I improve reusability using CSS variables?