Responsive Blog Preview Card using CSS Flexbox

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

I learned how to load variable fonts into CSS and I wanna learn more about how to make @font-face rules

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

1. I'm still learning how to write class names using BEM convention. I had to refer a few articles to get the names right (hopefully :-))
2. I struggled to get the local Static fonts loading into CSS. Tried different methods without success. Then I switched to Variable fonts and was able to load them into CSS
3. It took a long time to decide on how to name custom properties. It looks like there's no standard naming convention about how to go about it. I finally settled on somewhat functional nomenclature rather than size/color etc.

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

1. If you are familiar with BEM naming convention please go through my HTML class names and let me know if I made any mistakes there!
2. In my CSS, did I omit to include any required properties in @font-face?
3. I'm very confused about how to name custom properties in :root. How should I name them(by color names/font size or position or functional)? Please point me in the right direction if you can