Responsive product preview card using sass and flex box

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

I’m most proud of successfully implementing the black transparent overlay using the ::before pseudo-element instead of an absolute positionised div. I'm proud of utilizing SCSS variables to streamline my styling process and using nested styles. I used flex box but Next time, I would explore advanced layout techniques like CSS Grid to handle complex designs more efficiently.

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

One of the main challenges I faced was getting the black transparent overlay to appear correctly over the image. I was accustomed to using an absolutely positioned div, which required matching the height and width with the image dimensions each time it changes. I overcame this by using the ::before pseudo-element on the figure with top: 0, bottom: 0, left: 0, and right: 0, ensuring the overlay was positioned correctly over the image.

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

I would appreciate feedback on how to further optimize my SCSS, especially regarding best practices and responsive design. Additionally, any tips on improving accessibility throughout the project would be valuable.