Scorecard component

I coded the container and larger elements twice. First trying to use Flexbox on the main container and grid + flex within it. I finally settled on setting the main container as a grid instead (and still a mix of flex + grid within the elements). Would have you done it differently and if so how?

I used divs instead of semantic HTML tags because I couldn't see how they could fit. I mean perhaps in retrospective I could have use main (for the left side in blue / top part on mobile) and aside (for the right part / bottom part on mobile). What other semantic tags should I consider in this specific use case?

I named the different classes based on what I thought they represented (summary, score etc.). Is this good enough? Should I look into a different way of naming my classes? I am unsure of best practices to follow I heard about BEM but I feel like my projects are still to small to use it