Results summary component using variables and media queries

My biggest issues were the colors since my monitors weren't setup correctly at all and have horrible viewing angles which resulted in me not seeing colors in the first place. Which i improved but advice is welcome.

My next biggest issue was planning as i rewritten my CSS 3 times and partially my HTML simply because of not thinking of the font-sizes and colors before hand properly.

Lastly the corners of the individual summary stats were quite the challenge as everything i found online was either too complicated or didn't work so i had to make something myself and the transparent background only made it more complicated.

In the following example I'm unsure if it's semantically correct and what would be best for screen readers.

<p class="name">Reaction</p>
<p class="score">
<span class="dark">80</span>
<span class="light-grey"> / 100</span>
</p>

Would it have been better to do it like the following, since they are meant to be read together or wouldn't it make a difference for screen readers ?

<p class="stat">
<span class="name">Reaction</span>
<div class="score">
<span class="dark">80</span>
<span class="light-grey"> / 100</span>
</div>
</p>