.faqPage {
    h1 {
        text-align: center;
        background-color: #232F3E;
        color: white;
        width: 100%;
        padding: 0.5rem;
        text-transform: uppercase;
        font-size: 1.5rem;
        width: var(--fit);
        margin: 1rem;
        border-radius: var(--radius);
    }

    .faqAccordion {
        width: fit-content;
        margin: 2rem auto;
        max-width: 360px;

        @media (min-width: 1024px) {
            max-width: 720px;
        }

        .faqItem {
            overflow: hidden;
            margin: 1rem 0;
            border-radius: var(--radius);
            border: solid 1px black;
            box-shadow: var(--boxShadow);

            .faqQuestion {
                position: relative;
                background-color: #eee;
                cursor: pointer;
                user-select: none;
                font-size: 1rem;
                padding: 0.25rem;
                border-top-left-radius: var(--radius);
                border-top-right-radius: var(--radius);
                background-color: #e2e2e2;
                padding: 1rem;
                display: flex;
                gap: 1rem;
                align-items: center;

                @media (min-width: 1024px) {
                    &:hover {
                        background-color: var(--hint);
                        color: white;

                        img {
                            filter: invert(100%);
                        }
                    }
                }

                &::after {
                    content: '▾';
                    position: absolute;
                    right: 1rem;
                    top: 50%;
                    transform: translateY(-50%) rotate(0turn);
                    transition: transform .25s ease;
                }

                &[aria-expanded="true"]::after {
                    transform: translateY(-50%) rotate(-.5turn);
                }

                img {
                    width: 50px;
                }
            }

            .faqAnswer {
                overflow: hidden;
                max-height: 0;
                opacity: 0;
                transition: opacity .25s ease;

                .faqQuestion[aria-expanded="true"] + & {
                    max-height: 1000px;
                    opacity: 1;
                    padding: 0.5rem;
                }
            }
        }
    }
}