main {
    .faqText {
        margin: var(--margin-large);
        >h1 {
            margin: var(--margin-large) 0 var(--margin-medium);
        }

        >p {
            margin: var(--margin-medium) 0;

            &&:last-child {
                margin-bottom: var(--margin-large);
            }
        }
    }

    .faq {
        margin: var(--margin-large);
        ul {
            margin: var(--margin-small) 0 var(--margin-large);

            >li {
                margin: var(--margin-medium) 0;
                width: max-content;
                user-select: none;
                list-style: none;
                cursor: pointer;
                border: var(--border-width) solid black;
                padding: var(--padding-small);
                border-radius: var(--border-radius);
                min-width: 100%;

                &:last-child {
                    margin-bottom: var(--margin-extra-large);
                }

                >a {
                    color: var(--text-color);
                    text-decoration: none;
                }
            }

            >p {
                overflow: hidden;
                max-height: 0;
                transition: max-height 2s cubic-bezier(0,1,.36,.84);

                &.open {
                    max-height: 1000px;
                    transition: max-height 2s ease-in-out;
                }
            }
        }
    }
}

/* Mobile and tablet adjustments */
@media screen and (max-width: 900px) {
    .faqText {
        margin: var(--margin-small) !important;

        >h1 {
            font-size: 1.75rem;
        }

        >p {
            font-size: 1.25rem;
        }
    }

    .faq {
        margin: var(--margin-small) !important;

        >h2,
        >h3 {
            font-size: 1.75rem;
        }

        li {
            font-size: 1.5rem !important;
        }

        p {
            font-size: 1.25rem;
        }
    }
}

@media screen and (max-width: 1100px) {
    main {
        padding: 0 var(--padding-small);
    }
}

@media screen and (max-width: 480px) {
    .faqText,
    .faq {
        padding: var(--padding-small);
    }

    .faq ul li {
        font-size: var(--font-size-medium);
    }
}