Results Summary Component using HTML5 and CSS3 with grid

This was a challenging project which I really enjoyed. I used grid for both parts but perhaps should have used flex box for the summary. I would appreciate comments on:

1. The general result and whether I filled the brief properly.
2. The html
3. The CSS and in particular the use of grid in the summary section - I found this tricky and actually had to completely undo everything I had done because instead of the items in the grid being on a single row, they insisted on lining up in a single column with the 4 columns lined up in a single row and then 3 empty rows below. I ended up with a separate grid for each of the four components - maybe I should have used flex box here!