QR code component challenge

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

I am proud for attempting the challenge and acknowledging even if it is not perfect, still go ahead and do it. What I would do differently is add media queries to make it more responsive.

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

My challenge was thinking I could stack elements using just "align-content" and then automatically assuming that the browser should stack the elements on top of one another because of the size of the div that the element (image and text) was contained in, and that created another challenge where I encountered overflow issues. I later realised the issue's cause, and I solved that issue by using flex-direction: column to stack the elements on top of each other in ascending order on the ". Card" div container and leaving out "align-content" and rather using it in the "main", and that helped build knowledge for me on using flexbox better.

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

I would like help with responsive design, as I don't want to be getting away with using padding and margin, is there a possible way to build this QR code component using margin and padding optimally where I am not repeating myself, specifically when it comes to centring the elements inside the card and ensuring accurate alignment? Thank you.