.faq {
    padding: calc(var(--article-y-padding) * 1.5)
        calc(var(--article-x-padding) * 1.5);
    background-color: #fff;
}

p.qa-desc {
    font-size: 1.25rem;
    margin-bottom: calc(var(--article-y-padding) * 1.5);
}

ul.qa-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
    input[type="checkbox"] {
        display: none;
    }
    li:has(input:checked) {
        .question span:before {
            transform: translateY(-50%) rotate(0deg);
        }
        .stretch-area {
            grid-template-rows: 1fr;
            transition: grid-template-rows 0.5s linear;
            .answer-inner {
                display: block;
                &:before {
                    content: "A";
                }
            }
        }
    }
    .stretch-area {
        display: grid;
        position: relative;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows 0.5s linear;
        .answer {
            overflow: hidden;
        }
    }
    .question,
    .answer-inner {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: baseline;
        line-height: 1.5;
        &:before {
            position: absolute;
            font-size: 1.5rem;
            margin-right: 1.5em;
        }
        ul {
            list-style-type: disc;
            padding: 1em;
        }
    }
    .question {
        position: relative;
        background-color: #f4f4f4;
        font-weight: bold;
        padding: calc(var(--list-item-y-padding) * 2)
            calc(var(--list-item-x-padding) * 3);
        &:before {
            content: "Q";
            top: calc(var(--list-item-y-padding) * 2 - (1em * 0.25));
            left: 2em;
            margin-right: 1.5em;
            font-family: "Roboto Condensed", serif;
        }
        span {
            &:before,
            &:after {
                content: "";
                position: absolute;
                right: 2rem;
                top: 50%;
                width: 1.5em;
                height: 1px;
                transform: translateY(-50%);
                background-color: #000;
            }
            &:before {
                transition: transform 0.5s linear;
                transform: translateY(-50%) rotate(90deg);
            }
        }
    }
    .answer-inner {
        overflow: hidden;
        position: relative;
        margin: calc(var(--list-item-y-padding) * 2) 0;
        padding: 0 calc(var(--list-item-x-padding) * 3);
        &:before {
            content: "A";
            top: calc(-1em * 0.25);
            left: 2em;
            margin-right: 1.5em;
            font-family: "Roboto Condensed", serif;
            color: var(--main-color-light);
        }
    }
}