Product preview card component using responsive image elements

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

• Use the `` element to create responsive images. It allowed me to dynamically load the correct image based on the viewport size.
• Use CSS Local fonts
• Use element::before selector and the content: url() property to set the shopping cart icon. Bonus: It automatically sets the image to the appropriate size!

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

object-fit property needs a set width and height on the element. I had a situation where the image container was shorter than the adjacent info container. I solved it by setting the height to 100% with object-fit: cover. The width was already set at 100%.

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

When the viewport hits the breakpoint, sometimes I see a flicker as the browser tries to change the picture from mobile to desktop and vice-versa. I'm not sure what's the reason and how to fix it.