Responsive Product Preview Card using SASS

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

I am really pleased with the responsiveness using grid and media queries for the layout. My first time applying SASS to a project so it took me much longer to complete this. Also first time doing a mobile-first design so having to think backwards was challenging. I was going to use a pseudo element (::after) for the "old price" but I realised this was not good for accessibility.

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

I had difficulties getting my head around using breakpoints, using clamp() for responsive fonts and width: min() for responsive layout. Did a lot of trial and error before finding the sweet spots. Also the architecture of SASS was a bit confusing at first, knowing how to structure the folders. I can see now how this makes it easier to work on a project.

Also getting the image to change from mobile to desktop took me a while, looking at StackOverflow I realised I could include both images in the HTML, using display: none or display: block at the right breakpoints allowed me to hide and show the relevant image.

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

I could probably structure the SASS folders better next time, it's new to me so it's a learning process at this point. Any feedback on whether I could have done anything differently to make the code simpler would be appreciated.