Social Links Profile - Normal Flow

This is a nice solution overall, well done!

The html is well structured although there's no need to use section with a role of main when you could just use a main element, and it would be better for performance to include the CSS reset at the start of your style sheet rather than forcing an extra asset fetch by linking it as a separate file. Those are both minor things though.

More important is that this breaks on mobiles or when zoomed. It's caused by this in your CSS:

html,
body {
    height: 100%;
}

This causes the content to get cut off at the top of the screen when there isn't room for the content. (For example on small phones, on landscape view or when zoomed in). It's actually why Josh Comeau removed it from his reset a couple of years ago. To fix this, remove that CSS. It's the HTML height of 100% that causes the issue. Instead, use min-height: 100svh and flex column properties to center the component on the screen.

There's also no need for a media query in this challenge. Change the width on the card to be max-width (in rem) and the component will then respond well to different screen sizes with no need for a media query. (You can optionally give it width 100% as well) but try to avoid setting widths on elements.