All solutions

A couple of questions:

• The way I tried to make the font-size of the display cards seemed really off. Are there any better ways to do that?
• Was my solution accessible enough?
• Are there any "best practices" you would suggest?
• Is my js code clean and readable?
• Is it optimal to handle events with a for loop?

Any advices on what semantic tag i could have or should have used for the <section> tags would be appreciated.

I wrapped the qr code in an anchor tag for accessibility. I'm not sure if that's a valid practice. I am also unsure about what I put in the alt text. Are there any problems relating to these?

How can I make this component more accessible? Are there any issues with the units i have used in CSS? Did I use the ARIA roles and properties correctly? I couldn't make the circles around the icon and rating options center the element they are containing. How could i have achieved this?

I don't know much about the mobile first approach. How can I change/should have written this code so that it's mobile first?