Responsive profile card component using flexbox, grid & mobile first

Hi there! Your solution looks great.

On my opinion you can improve this things:

• try to avoid overwrapping. You use 4 elements as a card wrapper : main > section > .container > .cards-container

Instead of this you can simply set to the body these styles:

display: grid
place-items: center

It will be enough.

• Instead of using a svg image, you can use a background image. You could convert svg to background with SVG encoder.

• it's a bad idea to use the aside element as a card wrapper. It is more suitable for panels. You can use section instead.

• There is no reason to complicate selectors here. You can simply use single .stats selector.

.more-details .stats

I hope my feedback will be useful.

Good luck and fun coding 🤝⌨️