Blog page using CSS flexbox, object-fit and clamp()

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

I have challenges with the "learning" text on the card. I set the background color and noticed that the header block element was stretched to 100% in the parent element. To fix this, I've set the the width to "object-fit" after tinkering around with it for a while.

Another challenge Iv'e also faced was with the user section which is the very lasy div at the bottom of the card. The text was not in line with the photo and the photo was a bit stretched out. By fixing this, I made the image width and height equal to avoid it from looking all stretched out and set the line height for the text depending on the width and height of the img tag which kept it in line with the img tag.