Responsive QR Page using HTM, CSS Flexbox and media queries

Hello! Your project is great, keep the good work! :)

To improve your HTML structure I would recommend to start using semantic HTML, for example you could replace your div with class card with a main tag, replace your p tag with class title with a h1 tag. You could also start using BEM to name your CSS styles. And finally you could try to remove your div with class wrapper and move its styles to the body tag, It will have the same result :)

Maybe you should more semantic tags, I would use a <figure> tag to wrap your card, and a <figcaption> for the text. About the CSS y write it in this order

/** custom properties / :root { / your custom properties/ }

/** reset / / model box styles, font size, etc/

/** components / / buttons styles, cards styles , etc/

/** utilities */ / custom styles (hidden/visible components, call to action buttons)

/** misc **/ /*anything that doesn't fit in the other categories