Product Preview Card using HTML/CSS

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

Ultimately I didn't do anything different from my normal process. In the beginning I tested out the "mobile-first" approach by setting my regular CSS properties to go according to mobile, and set my media queries for larger displays. It was a little confusing at first and ended up reverting to setting up the CSS in the traditional manner. With that being said I still have better understanding of "mobile-first" and have a better idea for the next project I may have to approach that way.

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

Having to use two different pictures in the same element, and formatting that element to display the pictures based on size params was a little challenging at first. I initially was going to have two img elements, and set the CSS properties accordingly between the regular and the media queries, but being that the only param was the size/dimensions of the media screen, I just coded the styling directly into the HTML implementing a picture element. Finally adding width properties to the picture element in the CSS file.

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

Any tips on "mobile-first" approaches, as well as any and all tips for ways to approach building CSS with less code and more efficiency.