FAQ Accordion Component

By far, the biggest challenge with this one was setting up the images differentiation between mobile and desktop.

I tried several different approaches before landing on a divfor each one and giving it a display: none property on the opposing media query.

This helped me realize that there isn't always a "correct" way of doing things and that there are multiple ways to tackle a problem.

The accordion expansion animation is something I haven't been able to improve, as the animation has a "snap" feeling to it.

The accordion initially has a max-height: 0 property which changes to max-height: 500px when active. This is theoreticaly an "unnatainable" max height that an FAQ item will never have, and it´s so the content adjusts itself to the amount of letters in each item.

The animation was a lot smoother when I set a fixed height such as height: 50px when expanding, but this isn't a scalable solution as not every item has the same number of letters therefore needs more/less space.

I am overall satisfied with the final results but do realize there is much to improve on when it comes to preparing my code structure ahead of starting to write it.