Fixed Width QR-Component using flex, set width, and variable font-face

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

I am proud that I figured out how to properly configure and locally host a variable google font for this project. I am also pleased with the custom variables I created and utilized for this project.

I would like to further improve my organization for my CSS moving forward and would like to try a display grid instead of a display of flex.

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

My biggest challenge is deciding class names for each element within the HTML. I feel like I can look at a project and roughly determine what was used, but am unable to recreate when I try it myself. I utilized names I thought would work well and ultimately reviewed another solution after completing the project to compare and take notes.

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

I would really like to know if there was a responsive solution to keep the card the same size, regardless of screen size, as was presumably displayed with the desktop and mobile example images. I spent literal days trying to find a good solution and ultimately settled on a fixed width to achieve the goal.

I am also sure I missed obvious things like accessibility during development among other things, but I dont even know what I dont know and would love any feedback and criticism to improve and include for the next one.