FAQ accordion card without JavaScript, using details/summary elements

Hello everyone 👋,

Here's my solution for FAQ accordion card without JavaScript. I'm using <details> and <summary> HTML elements instead.

The illustrations should also scale properly when the base font-size changes and it should not shift when the accordion opens, unless it overflows.

One thing I've learnt was that to remove the summary disclosure triangle for webkit-based browsers such as Safari, we have to use summary::-webkit-details-marker { display: none }. Sigh... Safari 😔

I'd appreciate it if you can provide feedback on my solution. Thanks and happy coding! 🙇‍♂️🙏