FAQ Accordion (without JavaScript)

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

I like how the background image scales, and how it switches from mobile to desktop displays via media queries. While I like trying to use transitions, I think an instant change works alright here.

Next time, I would try out making the accordion using JavaScript and/or making it more accessible.

What challenges did you encounter, and how did you overcome them?

On Safari, the desktop background image didn't scale properly. Using width: 100%, the image's width was fixed and did not respond to the viewport width. Using width: 100vw, the image's width was dynamic, but could not go beyond the width the viewport had whenever the page was loaded/refreshed.

To solve this problem, the div containing the background images was given a width of 100%, and the background images were set to inherit their widths:

.background__container {
  width: 100%;
}

.background__desktop, .background__mobile {
  width: inherit;
}

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

I have a couple of questions:

• What is the best way to implement the plus and minus sign SVGs? I tried to find a way to insert them as mask images using ::after on the summary elements, but I encountered a "CORS" error, and this method overall was unfamiliar to me. Should they have been added as images that have alt text (which is what I went with), or would the svg tag have been more appropriate?
• Given the use of the details and summary tags, what are the best ways to make this solution more accessible?