Responsive social links profile using flexbox and clamp()

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

I've noticed that the padding of the card is larger on desktop than on mobile and was wondering how can I achieve responsive padding without using media queries.

Finally I managed this by deciding that the minimum padding value will be 24px based on how the mobile design looked and maximum will be 40px when the card reaches its max width, which I set to 400px looking at the desktop design (I guessed these values by eye because I didn't use the figma file for this project).

I then calculated when does the card reach its maximum width provided I set its width to 87% (based on how wide it looked in the mobile design) and plugged the value (400px/0.87 = ~ 460px) into https://utopia.fyi/clamp/calculator/ as the max viewport width because that's when I want the padding to reach its max value.

For the min viewport width, I set it to 375px which is the size of the mobile design and I want the padding to reach its min value (24px) at that point.

And then of course I set the min and max length unit in the calculator to 24px and 40px. And this is the result I got: clamp(24px, -46.5882px + 18.8235vw, 40px);

I pasted it into my code

.linkcard {
    width: 87%;
    max-width: 400px;
    padding: clamp(24px, -46.5882px + 18.8235vw, 40px);
  ...
}

and it worked exactly like I wanted :)