FAQ Accordion Card - Semantic HTML + SASS/SCSS Only Solution

I decided to try to tackle the bonus challenge to only create this in CSS. Additionally, I've been wanting to tackle a little bit of SASS, so I thought this would be a nice challenge to try out. I feel like I've added an extra day's worth of work to myself by attempting all of this when it could have been done in a quarter with JS. Oh well, learning!

• I really wanted to attempt this with the semantic use of <detail> and <summary>, as they're a "built-in" HTML accordion box.

• I wanted to animate the accordion a bit by transitioning the height of the answers when they dropdown, but some of these effects are harder to achieve when using CSS-only options. If I tried using a max-height: 99rem (to mitigate long answers), the animation sometimes only worked one out of five times, or became "choppy". For that reason, I had to limit it to about 10rem, with the caveat that if a question were added later, the developer would have to increase the max-height value to say 15,20,30rem, etc. If there's a way to make it a little more responsive, I'm all ears!