QR Component Using Plain CSS

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

It's been a while since I've written in plain CSS. In my day to day job I use a combination of SCSS, Bootstrap and occasionally Tailwind. It was interesting to see how far regular plain CSS has come, even if some features such as nesting isn't compatible on all browsers.

Not sure what I would do differently next time. This was a fairly simple component.

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

The only challenges I encountered was not being able to see exact dimensions, and spacing between elements. I expected the Figma file to not just contain an image of the component. I had to guess at border radiuses, padding, margins, etc and compare between the static images and the rendered component.

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

There's many ways to code the same thing. Are there new HTML/CSS techniques of shaving down code that I didn't utilize?

I'm also seeing one accessibility flag: "Document should have one main landmark". I added a Main element with the role of main. Read through this documentation, https://dequeuniversity.com/rules/axe/4.9/landmark-one-main, and still confused as to what I am missing.