Results Summary Component using Flexbox

It has been quite a while since I have come back to submit another challenge in Frontend Mentor mainly from adjusting in college. I started this challenge last year and was unable to submit and has been lying uncompleted ever since I got back this year. As I submit this, here are my thoughts during the making of this challenge

• My naming convention is a mess
• Not separating my [utility CSS] and [component CSS] has given me a headache of always traversing the sheet.

So this time, I have come to adapt a naming convention that will help me with naming classes like...

.products-wrapper {
}
.products {
}
.products__items {
}

Separating the utility classes such as the common divs, main, headers, mainly repeating classes should be separated onto a different stylesheet for better readability. I promise to apply these techniques and learnings onto the next challenge.