All solutions

It's been a couple of months since I did this sort of thing and the JS was messy but I think I got the result I was looking for. Any advice would be appreciated.

I have a 2 monitor set up and I noticed that when I viewed the page on the larger screen (I usually work on the smaller one), I have to zoom out in order to view the page correctly. Also, I had a hard time deciding between using grid or flexbox. I ended up using both depending on the situation, which I assume people do all the time.

I couldn't make it work without JS. I tried to add a details tag, which helped eliminate some of the code, but when it came to things like flipping the arrow image, and making the text in the summary tag bold when it got clicked on, I couldn't find a workaround.

I noticed the mobile view changed depending on which browser I was viewing it from. I was wondering if that was normal or not. Also while I was doing the JS, I added functionality that allowed the user to make a selection which changed the color of the number, but doing so removed the hover effect in CSS. I couldn't find anything on adding hover using DOM.

I was unsure of how to create the mobile view, I think I sort of got it right but some of the placements were off. Also, I couldn't get the correct font. Flexbox was also a problem for me. I kinda got it to work but I have to look at more examples.