Profile card component

Hello 👋,

I am submitting another little challenge. Although the project was very simple in terms of complexity, I spent a bit more time with the implementation as I was learning and applying some new things, including:

• Using a Modern CSS Reset by Andy Bell
• Applied CSS Nesting.
• Aligned CSS units more precisely. Previously, I used rem for most things, but it makes sense to keep rem primarily for font-sizes and use the ems for width/heights and px for some small units (letter-spacings, borders).
• Regarding colors, I also changed the definition and started using the more compact form for the variables containing just the value (e.g 228 9% 92%). The advantage of this approach is that once it's used, it can be just easily wrapped by hsl with opacity set as an extra value, e.g. hsl(var(--color-variable) / .7);.

It was fun to implement this project too. The only extra challenge for me was to try to position the background images as precisely as possible to the original Figma. It's probably slightly off, but I am happy with the result in general.