FAQ Accordion Card

Hello Keagan, well done and congrats on solving the challenge. I have some tips that might help. 1- for closing the question automatically in the JS file you have to add a loop that goes through all other questions before your function of adding the class, by using the forEach() function and then remove the class open from all other questions. 2- you can also give some transition to the rotating arrow and the head of the question maybe: 0.5s. 3-you can also add align-items to the question to have the text and arrow in the center 4-for the image on the left I believe you should move it with position relative and give the div parent of the image overflow:hidden; 5-for the background image of the main tag you can give it: background-size: cover; background-repeat: no-repeat; and you can move position it with background-position 6-you can also give the main tag width of 90 or 95vw and margin:0 auto; I hope this helps a bit and good luck.

You can look at my solution, I managed to do it by including all the images in the HTML file, with two divs, inside the white Box, with the overflow: hidden.

<div class="white-box">
      <div class="images">
        <img src="./images/illustration-woman-online-desktop.svg" class="illustration-woman-online-desktop" alt="illustration-woman-online-desktop">
        <img src="./images/bg-pattern-desktop.svg" class="bg-pattern-desktop" alt="bg-pattern-desktop">
      </div>
      <div class="square">
        <img src="./images/illustration-box-desktop.svg" class="illustration-box-desktop" alt="illustration-box-desktop">
      </div>
</div> 

.images {
                    overflow: hidden;
          }

Hope this helps. Happy coding !