Solution #1

It was difficult for me to realize just how much I can do with CSS, since everything doesn't work well at first. It takes a bunch of little adjustments and trial and error until finding the solution. It was difficult to make the Compact Summary Card, with the circle in it, but I figured it out in the end. I also struggled a bit with ordering the elements of the Extended Summary, but again, I figured it out eventually.

I am unsure about the cleanse of my code, wether there are things I did which were unnecessary and only overcomplicated the process.

I would like to ask about centering everything in the page, I struggled with that, and only centered things artificially, using padding and margins. After a while flexbox didn't work. This is also why I didn't add the shadow, as it would have bordered the entire bottom of the screen. I also couldn't figure out how to center the text vertically in the pills in the Extended Summary section. Any advice regarding centering these specific bits would be wonderful.