Blog Preview Card: CSS, HTML, Flexbox, Fluid Font Sizing

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

Happy about:

• Getting the fluid font-size transition to work as the screen width gets narrowed down. My solution to this was to use a clamp function. However, this is dependent on setting the container-type of the main .card component to inline-size.
• Starting to incorporate a separate reset.css file. This is particularly helpful with the spacing and layout of my elements.

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

How to implement a font transition without the use of media queries.

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

I am missing something regarding the Typography. Although I am confident about my Figtree imports and usage of font-weights and font-sizes, the content-width (generated by my text) exceeds that of the Figma Design file. Do you have any ideas on how to solve this discrepancy?

Take for example the "Learning" span element beneath the picture. My content-width is about 67 pixels. But according to the Figma file, it should actually be 58 pixels.

Am I missing something regarding the letter-spacing and/or the word-spacing in my CSS?