Social links profile implementing `:focus-visible` Pseudo-Class

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

I tried to not use "Rem Font Size Hack". But instead using calc() function to set the sizes in rem. I will use this and maybe other rem methods as well in the future challenges.

I'm implementing :focus-visible pseudo-class selector on the social links, so it won't show the focus ring when being clicked/tapped.

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

• I solved the issue of card shrinks when using max-width inside flex, by using width and min() function.

  .card{ 
    width: min(calc(327rem / 16), calc(100vw - (24px)));
    /* max-width: 327px */
  }
  

• I was unsure whether or not to use <nav> to wrap the links on this challenge. After confimed by a discord member, I removed the nav element.

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

• What methods do you usually use to write rem? On this challenge I use calc() function.
• To solve the problem of card shrinks when using max-width inside a flex, I use width and min() function:

  .card{ 
    width: min(calc(327rem / 16), calc(100vw - (24px)));
    /* max-width: 327px */
  }
  

  Do you know any other solutions?