Social links profile with flexbox

What are you most proud of, and what would you do differently next time?

If you compare the desktop layout with the mobile layout, you can see that on desktop the social links are slightly wider than the paragraph directly above them. On mobile, the width of the links is closer to the width of the paragraph. That is, going from desktop to mobile, the width of the card shrinks to fit the smaller viewport width. I knew I could achieve this shrinking behavior with flexbox, but it took me a whole day to figure out how.

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

What I had been missing was that the main element had to span the whole viewport width. With main as a flexbox container with the default flex-direction: row, I used justify-content: center and align-items: center to center the card horizontally and vertically. flex-basis: 24rem and the default flex-shrink: 1 gave me the desired width of the card component in the desktop layout and the shrinking behavior for small viewport widths.

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

I would appreciate feedback on how I can improve my code. More specifically, I would like to know whether there are any issues with accessibility. Thanks for your help!