Product Preview Card w/ Pseudo elements, Data Attributes, and more!

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

I am really happy that I was able to immediately apply what I learned about using the picture element to change image src depending on some media query. I was also able to apply usage of data attribute to add an icon inside a button with help of pseudo elements. Lastly, I was able to add some screen reader support to the pricing!

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

I wanted to figure out if it's possible to change css variables value through media queries and as it turns out it was! So with it, I created some locally scoped variables to dynamically adjust some padding since the design calls for it!

Additionally, I was trying to see if I could use the data attribute to help me decide what icon should be using in my button as I try to setup a button class with the intention of possibly using it elsewhere (this is for possible bigger project where button class can be a utility class). Through some trial and error, I was able to add it with the help of pseudo-elements and got to use background image property again.

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

I'd like to have feed back on the way I added screen reader support through a visually hidden class that I came across with from CSS tricks website.

Additionally, feedback for my semantic usage is appreciated as well. That is something I am trying to improve as I do more of these challenges.

Feedbacks are super appreciated. Thanks!