Results Summary Component (HTML, CSS Flexbox, no JS)

Am I using "display: flex" too much in my CSS? I'm wondering if I am using display:flex too much in my code, since pretty much every part of the CSS has "display: flex; justify-content: center, align-items: center; flex-direction: column" used in almost the same way every time.

Is there a better way I should be organizing <p> <span> and <h>? I am also unsure if I am organizing my HTML correctly. I tried the JS bonus challenge but quickly ran into issues so I decided to submit it without.