Responsive Product Preview Card Solution with Sass, Flexbox and Grid

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

I am most proud of being able to incorporate responsive images and CSS Grid in this project. Both topics are fairly new to me, as I've only dealt with the basic media queries and making layout/ text content responsive, but haven't really applied that to images. I also have always used Flexbox for everything, and I think that understanding Grid provides another amazing option to formatting layouts.

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

I encountered challenges with having the browser choose the right image to display at different screen sizes. I started off using srcset and the sizes attribute to set the widths of both images, but I think that both images being so similar in width, and actually having the smaller, mobile image (686px) have a larger width than the desktop image (600px) was confusing for the browser. I later found out about the picture element where you can specify multiple sources for different media conditions, which ended up being the exact solution I was searching for.

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

I read on stackoverflow that you have to add the class on the img tag to style it, I was wondering how come adding it to the picture element doesn't work?

 //why not this?