Responsive QR Code card built using semantic html

I added the css typography directly on the body element. It made it easy for me because the entire page used just one font family through out the elements. I used the css {margin: n% auto} to set the card (article element being the parent container) in the horizontal middle of the page. Then I used media queries to adjust the size (in %) of the card, breakpoints used are: (max-width: 1000px), (max-width: 600px) and (max-width: 375px).

I will like to have more criticism given to my choice of breakpoints used and the size I gave to the card in each. I am thinking there could a more professional way for choosing breakpoints for such a card design than the breakpoints I applied.