Responsive User Card Component - Grid and Flex

Howdy!

Straight off the bat, I don't usually greatly care for background images so didn't spend time on that, just did 1 version by eye and left it.

Most of my time I spent on CSS trying to ensure the card is as responsive and well structured as it can be, not to achieve a perfect card, but to ensure I'm maintaining best practices (as far as I understand them at the current time).

Note: I avoid pixel-perfection as I try the sizing to be determined by the content, padding, margin and gaps.

1. More content can be added and it doesn't break the design

2. Whether this has a max-width of 350px or 500px, nothing breaks and everything remains responsive.

3. I didn't use fixed height values anywhere outside of the body and grid-template-rows. This is because I try coding with the content creating the 'height' by itself. This is in effect more 'flexible' and dynamic.

One thing I don't understand is how background-position works.

To explain: lets focus on the top-left image. In order to make this position itself relative-to-the-body-center I had to use bottom-right, as opposed to the intuitive top-left. Top-Left made the background-image dissapear. Bottom-right, after setting it up, keeps it 'fixed'. To me this is extremely strange behaviour and I guess I'm missing some fundamental understanding in CSS 😯