Responsive QR Code Component using Flexbox & CSS Grid

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

I'm most proud of keeping my code clean and organized, while making the layout fully responsive on both desktop and mobile. I also managed to use Flexbox and CSS Grid effectively, which helped me understand their differences better.
Next time, I would try to structure my CSS with more reusable classes and possibly use a methodology like BEM for even better scalability.

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

One of the main challenges was aligning the card perfectly in the center of the page while keeping it responsive. At first, I struggled with margins and padding, but I overcame this by using Flexbox properties like justify-content and align-items.
Another challenge was making sure the text size looked good on different screen sizes. I solved this by using relative units (rem, %) instead of fixed pixels.

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

I would love feedback on how I can make my CSS more efficient and reusable.
Also, I’m curious if there are best practices for structuring small projects like this one, so the code remains clean and easy to maintain as projects grow.
Finally, any advice on improving accessibility (like ARIA attributes or semantic HTML) would be very helpful.