QR code component using CSS flexbox and incorporating accessibility

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

When approaching this project I wanted to make the site more accessible by providing an alternative option to accessing the QR code. To do this I created an invisible link button that would highlight the QR code and when selected would also navigate to 'frontendmentor.io'. Because of this change I added the 'alt' tag message to this button rather than the image and made sure to reference this alternative option in the text below the QR code as well.

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

I'm currently looking for feedback regarding my use of flexbox for this project (1) and how I approached making this site more accessible (2).

1)To get the card holding the QR code to be positioned in the center I decided to use flexbox. While this does keep the card in the center of the page, changing the dimensions of the screen smaller that of the card causes issues to occur.

If the dimensions of the screen become to small horizontally, the card is cut off and the text inside the div of class 'attribution' (which is currently under the card and hidden using the 'hidden' class) no longer aligns the text to the center. I believe this is due to the size of the flex box column also changing smaller that the screen size.

If the dimensions of the screen become to small vertically, and the user uses 'tab' to navigate to different items, the screen scrolls to the bottom of the page, (viewing the items in the div of class 'attribution') and the invisible link button is no longer aligned with the QR code.

Is there a way to prevent the above issues from occurring while also using flexbox?

2)I've gone into more detail about how I handled accessibility in the 'What challenges did you encounter' section. I'm mostly looking for feedback on if the approach I used and how it can be improved upon.