Interactive and mobile responsive FAQ accordion using CSS and JS

What are you most proud of, and what would you do differently next time?

I have created reusable accordion that I can easily plug and play into my future projects.

I learned to use outline to highlight keyboard-accessible elements, improving their accessibility. Here is the implementation:

/* Establish a default outline style for all elements, 
** which will not affect layout or spacing */
* { 
    outline: 2px dashed transparent;
    outline-offset: 3px;
}

/* Add color to the outline when the element 
** has focus due to keyboard navigation */ 
*:focus-visible { 
    outline-color: hsl(292, 16%, 49%);
}

I also learned the use of aria-expanded="{boolean}" and aria-controls="{idValue}" to create a more accessible and dynamic experience for users, specifically in the context of collapsible elements, by providing a clear indication of their expanded or collapsed state and establishing a clear relationship between the toggle control and the content it controls.

Here is the sample implementation:

<article class="accordion js-accordion">
    <button aria-expanded="false" aria-controls="accordion-content-0">
        <span>Questions</span>
    </button>
    <div class="content" id="accordion-content-0">
        <div class="inner">
            <p>Answer</p>
        </div>
    </div> 
</article>    

What specific areas of your project would you like help with?

I believe there's room for improvement in how I've structured my HTML5, SASS, and JavaScript. If there are any best practices or suggestions that could help enhance my code, I’d really appreciate learning about them.