QR code component

HTML:

• <main> has an implicit role="main", so there is no need to declare it explicitly.

• The alt text must also say where it leads(frontendmentor website).

• .attribution should be a <footer>, and you should use <p> for the text inside. It needs to be moved outside of the footer, as they are 2 separate landmarks.

CSS:

• Including a CSS Reset at the top is good practice.

• Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

• Add gap: 2rem on body, to create space between the card and the footer.

• I would use px for border-radius instead of %.

• Remove all widths in px.

• Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

• Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

• Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

• On the image, change width to max-width.

• As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem, not px.