The semantic tags are great.
Personally, I would not use that many compound selectors in this quite simple layout, instead, I'd use an H1 for the title and a paragraph for the text.
In this case, you can declare quite easily the attributes in CSS.
I would use a fixed width for the card and add a wrapper for the card content within the <section class = "qr-code-image-with-info">
with small padding, to solve the issue with the distortion in smaller screen sizes and to have a consistent margin.
<section class = "qr-code-image-with-info">
<div class = "container">
<figure class = "qr_code_image">
...
<section class = "qr_code_info">
...
</div>
</section>
If you follow in this way you only have to set the width of the image to 100% and by not setting height it would not distort the image either.
You do not have to use flexbox to center the card, you can use
.qr-code-image-with-info {
margin: 30vh auto
}
to center it horizontally and also push it away from the top of the screen.
I hope I could help you with my feedback and please let me know if you have any further questions.