Responsive blog preview card using clamp() and Sass

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

I'm proud of getting used to the cadence of how to build a component from the ground up. The idea of first figuring out what content is needed, defining variables, fonts, and then figuring how out to approach styling is something that I'm glad I'm able to embrace.

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

One challenge I faced was defining fixed widths for the card for both mobile and desktop views. I struggled to find a way to make it more responsive. To overcome this, I utilized the clamp() function to make the component responsive. This approach ensures that as the screen size increases, the component also scales up to a certain limit, providing a more fluid and adaptive design.

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

The font "Figtree" isn't rendering on local but not on production. I'm not sure why this is happening. If someone can advise that would be great. Thank you

I noticed that in the Figma mockup, the mobile view seemed to have a 1.5rem margin around the card. However, after applying clamp() to the card’s width, I couldn’t achieve the same margin effect. I’m not sure if this discrepancy is significant, but I would appreciate feedback on how to accurately replicate the margin as seen in the mockup while maintaining responsiveness.