QR code component solution

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

I'm most proud that I managed to finish this challenge :) Next time, I might separate CSS from the index.html file and maybe use some variables (or even SCSS) for styling.

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

I had a problem with centring the card both vertically and horizontally. I found some articles about using flex to do this, but the default margins and padding messed it up a bit (creating additional space so that scrollbars were active). I've used a "hack" with * to reset those, but I'm unsure if this is the right approach. I've also had an issue with properly sizing the text elements on the card - the style guide said the paragraph size should be 15px, but there was no mention of the size for the header. I had to download the Figma file to check the proper size so I could mirror the design as closely as possible.

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

1. I'm not sure if the HTML structure I came up with is the right approach. I tried not to overuse div elements, I reached for tags like main and section to give it more semantics although I worry that this is overkill for the example in the challenge. Any feedback is appreciated.
2. I had a problem with centring things and I've used flex to solve it - what is the best approach here? I've used height: 100vh on the container to fill the whole viewport so it is also centred vertically - is this how it's supposed to be done?
3. Is the naming of the classes in the CSS fine? I've always struggled with naming them and I went for naming by the "component" they describe.