QR Component challenge using CSS Grid and Flexbox

Hi! First of all your work looks pretty good. I took a quick look to your code and css and seems all right for the project. Specially I liked how you named your classes. Regarding your question of no using magic numbers for the card's width, the way I would have approach to it is by fixing the width of the image. And from having an image with a fixed width (i.e. width: 300px; height: auto; object-fit: contain). After that, I would try to make the hole card fit the width I want with padding. I find this approach more maintainable in the future because in case you want to change the image, you will have only one point of change instead.

If you want the image to increase/reduce size by making it responsive I would recommend you to search for the css function called clamp and use rem instead of px for such units. THIS LAST PART is a little bit more advanced, so take it with a grain of salt. You are doing well my man, I would recommend you to practice another exercise instead of stressing yourself with making this exercise perfect. There are more interesting exercises beyond, just improve a little bit each time you solve one

You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

.container {
  display: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful