Social links profile solution

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

I didn't have access to the design file, so I am pleased with how close I got eye-balling the design images.

I experimented with the clamp() calc() functions for the first time - I am not sure if it was necessary to use them, but it seems to have made the design more responsive without needing a media query.

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

As always, I find it challenging to match the widths and spacing to the design. The desktop design image seems to be wider than the mobile, and I am not sure how the designer would expect that to be achieved by the dev without declaring a width.

At first, I did not include a width property at all for my .social-card, but then it did not match the desktop designs width relying solely on its content and some padding. I hope by using max-width and rem units, it is a little better than fixed pixels?

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

• I would love to know any other way of achieving the wider desktop width shown in the design image without declaring a width.
• I would like to know if my semantic html was overkill or not enough!
• My custom properties are based on eye-balling the design, so may be incorrect. Let me know if there were simpler spacing solutions! I applied them to margins; if there was a better approach, please let me know.
• Any accessibility tips, as I have not yet learnt much about it.

Thanks!