Product Preview Card Utilizing HTML and CSS

I'm most proud that I stuck with this project and made it as responsive as I could without sacrificing the overall layout. There was a specific way in that I wanted this project to look, and I just stuck with it until I constructed it to my liking.

In reference to what I'd do next time, I'm not sure actually. What I made sure that I did this time, was la out the content in HTML so I didn't always have to go back and reconstruct elements. This is essentially how I wanted to go about this project, which stemmed from some things that I ran into on the LAST project.

Making the image responsive was the challenge for me here. I've read the MDN articles, Stack Overflow...and I just couldn't figure out why I couldn't stretch the perfume image from the mobile layout without sacrificing the content of what I had already built. I basically had to familiarize myself with percentages in combination of the 'max-width', 'min-width', and 'width' properties. It took some fidgeting with the code in order for me to get it all put together, but eventually I found the solution. I also had a lot of issues getting the footer to view correctly in the mobile layout. I had the position at 'absolute' because I didn't know how to get it to align below the card. I took a break, a quick nap, and it occurred to me that I just needed to change the 'flex-direction' on my '.canvas' class to 'column'.

I don't think there is anything that I needed help with, but tips and comments are always helpful. I just want to get better every day...