Stats preview card component

Hello 👋,

I am submitting another solution, which nicely tests various techniques of layout building.

It could be built exclusively in Flexbox in this case (as this is just a card component), but I decided to use a combination of Flexbox and Grid to have a chance to practise several vital concepts of both.

The starting point was to utilize the CSS variables for repeating elements like fonts, card dimensions, etc. At this time, I used the calc function with a combination of these variables. It helped me to be sure the result was always consistent.

I learned that the line-height should always be declared without a unit as a ratio. To make sure the scaling works appropriately. I used rem for the line-height in the past, but unfortunately, it doesn't scale properly when a font-size is changed.

In terms of CSS Grid. I tried to be more playful. It's easy to define the basic stuff, but I made sure at this time that things like flex-basis are set and calculated correctly to try to be as close to the original design as possible.

I learned that using flex-basis with gap really helps to position Flex children correctly.

The last thing I would like to mention is the usage of CSS inheritance more broadly. Sometimes I duplicated the border just because it wasn't inherited by default. At this time, I ensured the border-radius is defined only once and passed to the children via inherit option accordingly.