Heavy CSS Practice building Results Summary Component

I had a lot of hard time making the autofill using grid work right. When it was resized to mobile, the whole module would look squished and wonky or misaligned. I ended up using flexbox with flexwrap for my solution which worked out great especially at mobile sizes.

I also struggled using "place-content: center". I was trying to figure out why my grid would move out of the viewport at smaller-sizes instead of generating the scrollbar. I eventually figured out it was this property that was causing my issues. I also updated the grid so that there is a row above and below with 1fr and middle row with my content to perfectly center it. This helped with the centering and the smaller viewport issues. I don't know if that's best practice, but so far, positioning with grid behaves more like what I expect when set up this way.

I put a lot of effort into adding the "(" in the corner of each summary items. I added pseudo elements and positioned them manually. I don't know if there was a better way to do this.

I used "figure" in efforts to be more conscious about semantic HTML markup. The left side of the module is a figure, and the summary is another figure. I don't know if that's the best way to handle this or if I'm misusing <figure>

I had fun adding transition to the continue button. I'll be using this trick in the future.

At some point I was trying to practice using webpack to manage my files but grabbing the icon images url was a nightmare after packaging. It would throw errors that whatever url I parsed from json is not a valid text. I eventually gave up and did not use webpack. I just used ES6 import feature.