Result Summary Component with responsive using pure CSS (mobile first)

The circle with the score (which is not at the center of the circle) is hard to deal with. I found that using var to fix the height and width of the circle is not a good approach since I can't know the final height of the score text. If I increase the font size, the circle may turn out to be oval because the text cannot fit in the var height, resulting in stretching the circle in a vertical direction.

If you know the best practice for this case, please let me know.

Thank you in advance 😊