FAQ Accordion with Vanilla HTML & CSS

Hello Mentee's,

This project was surprisingly fun, but also tricky!

I have spent quite some time on Googling which tag to use for the FAQ Accordion. After a considerable amount of time searching on the web, I found about the details and summary tags. These tags combined hide or open the answer of a question when the element is clicked on. JavaScript became unnecessary using these tags:

<details>
  <summary><b>How many team members can I invite?</b></summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit
    on team members for the Premium plan.
  </p>
</details>

The tricky part of this challenge was the layering of the elements, especially the box for the desktop design. I have spend quite some time figuring out how to position the box on the specified spot. Position absolute on the box with position relative on the body did not seem to work, because the element moved inwards while resizing the window. I also placed the box inside the FAQ Card (parent of the other background-images which is set on hidden overflow). I was looking for a way to force the child element (the box) to appear visible outside of the hidden overflow container with a disable function. This however was impossible. The solution I found was to place back the box outside the main and wrap the box and the main in a container which is set to position relative.

 .container {
    width: 19.688rem;
    @media screen and (min-width: $desktop) {
      position: relative;
      width: 57.5rem;
    }

Feel free to leave suggestions.