QR Code Component

I'm pleased with my solution so for because it's visually similar to the design file, responsive, and I believe uses a fairly minimal amount of code to get the job done. Even though it's relatively simple, I know there are a number of things that could be done more wisely and I am looking forward to suggestions from the community on how to improve, what I overlooked, and what I can do differently next time.

The hardest challenge was deciding the most efficient way to handle the correct vertical spacing between the image, header, and paragraph, while at the same time matching the text wrapping and white space left and right of the text. The base padding in the card which wraps the image was not enough to force the desired tax wrapping. That might not be important, but visually to me the text section is clearly not as wide as the image. I wanted to avoid creating an extra div inside the card to wrap the text and add extra padding, so I decided on individual margins for the 2 text elements. Giving the card header 1.3 rem y-axis padding worked to get the spacing I wanted between the image and paragraph. 0.25 x-axis looked good to me to contain it horizontally. For the paragraph, the 1rem y-axis doesn't do anything to further separate from the header because of margin collapsing, the header margin wins. But to me there is a bigger gap below the paragraph to the bottom of the card, and that adding to the padding looked right. I suppose I could have set that difference to the bottom padding on the card. But since I wanted to add left and right margin to the paragraph as well, it seemed like either choice didn't make a lot of difference.

Naming conventions: Is it ok to use div here instead of an element like article? Are my names for classes appropriate? How about my CSS variable names?

CSS selecting: For nested elements, is it right to select just the class name for the element I want to select (e.g., .card-header), or should I include the parent's class? (e.g., .card .card-header, .footer .footer-link), etc.

Keeping the footer on the bottom: My solution was position: fixed, bottom: 0. Is there a better way? Adding flex-grow 1 to the main element also worked, but it seemed like not the best method.