Product Preview Card Component (HTML, CSS)

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

Hello

I haven't completed a solution in a long time so I'm fairly happy with how this went. Took awhile but I got the hang of the newer sass syntax with @use and @forward instead of using @import.

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

Fonts didn't work - at first

To begin with none of my fonts were loading and I couldn't figure out why. After some research I found out that it was because I was using url's relative to my sass partial, and not to where the partial code is resolved. It wasn't a bad thing though as I learnt something new and got to experiment with optimizing fonts.

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

Article, div or li?

I used an h3 in place of h2 or h1 as I viewed the component as part of a larger real life page, but that's not what confused me.

I wasn't sure whether the main card should be an article, div or li. The card could easily be part of a carousel of li's, it could also be a stand alone div or article, this is where I was confused. In the end I decided to make it an article.

Any advice on what tags are most appropriate and what tags I could use for .product__content and .product__thumbnail would be appreciated. These feel like dividing sections/containers to me, and I wasn't sure whether a div or section would be most appropriate.

Thanks for reading, open to any advice/tips!