QR-Code

Heya Joshua! This solution looks great! 👍

I've got a couple of suggestions, but I'll try to keep em' brief:

• You can move the attribution div out of the container div. Understandably, this'll look a little strange at first because you've got body set to display: flex. To sort this out, set the flex-direction to column and the attribution div should sit right below your QR container div. Once that's sorted, you could add a bottom margin to your container div to add a tiny bit of spacing between the two elements.
• We can clean up your code and sort out the container div's sizing by setting a max-width. I had a look at the Figma files and it looks to be around 320px. Your container div should look something like this:

.container {
  width: 100%; 
  // alternatively, you could use vw units, so you could do something like:
  // width: 90vw; (or any value you think looks best) instead 
  max-width: 320px;
  padding-bottom: 2.5rem;
  margin-bottom: 1rem;
}

With this set, you can remove the media-query blocks for your container div. I think that should help clean up your CSS a tiny bit.

As for CSS resources, I highly recommend Kevin Powell's Youtube Channel. He's got a whole range of videos about responsive design and getting started with CSS.

Hope this helped!