Responsive results summary using grid and flexbox

What are you most proud of, and what would you do differently next time?

Some HTML im proud of 🥰: creating a data attribute data-spacing to increase the data flow gap between some elements

Some CSS im proud of: Defining the --clr-category on each summary-item:nth-child(x) and then setting the category background and text using that variable

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.75rem;
    background-color: hsla(var(--category-clr), 0.05);
    padding: 1rem;
}

.summary-item--title {
    font-size: var(--fs-300);
    font-weight: var(--fw-medium);
    color: hsla(var(--category-clr), 1);
}

.summary-item:nth-child(1) {
    --category-clr: var(--clr-primary-red);
}

What challenges did you encounter, and how did you overcome them?

Seems silly but I spent way longer than I should have on trying to get the "76 of 100" score to sit on separate lines using flex...when I realised I could just set the `` element containing "of 100" to display: block. Looking back now I don't know why it took me so long, but thats learning eh?😅