QR Code with CSS Grid and Flexbox

👾Hello Freddy Santana, congratulations for your solution!

I saw your live site right now and its almost finished, there's only some small details you can fix in order do improve it.

1.The background is not full width because you've add it to the container not that there's a difference between the card size and the screen size, the width 1440px given for the challenge is just to say in which resolution the challenge was created, you don't need to set a max-width for the body and for the component the max-width is 350px thats its size:

To fix the background not filling the full screen just remove the max-width: 1440px;:

.container {
    /* max-width: 1440px; */
}

2.To allow the component card to be responsive you've to replace width with max-width the difference between this two properties and that width is fixed and max-width is flexible.

Hope it helps Freddy, and happy coding!

The BEM seems correct.

I'd recommend putting padding on the card rather than on each element inside the card. This will let you standardize the padding instead of having to set in everywhere. The method you did makes it hard to make changes.

You can get away with just having this on the image:

max-width: 100%
border-radius: (whatever)

That lets you get away from using a magic number for width.

grid-template-rows with percents seems like a bit of a fragile solution. I'd recommend splitting it like: card -> card-head + card-body and then maybe using fr to divide up the space between the head and body.