.faq {
    --animation-speed: .25s;
    --marker-color: var(--primary);

    container-type: inline-size;
}

    .faq details {
        overflow: hidden;
    }

    @supports selector(::details-content) and (interpolate-size: allow-keywords) {
        .faq details {
            interpolate-size: allow-keywords;
        }

        .faq details::details-content {
            block-size: 0;
            transition: block-size var(--animation-speed), content-visibility var(--animation-speed);
            transition-behavior: allow-discrete;
        }

        .faq details[open]::details-content {
            block-size: auto;
        }
    }

    .faq details .answer {
        overflow: hidden;
    }

    .faq details .answer.is-animating {
        transition: max-height var(--animation-speed) ease;
    }

    .faq details:has(summary:focus-visible) {
            outline: 2px solid var(--primary);
            outline-offset: 6px;
        }

    .faq .column {
        flex: 1;
    }

    .faq summary {
        cursor: pointer;
        font-weight: bold;
    }

    .faq summary::marker {
            color: var(--marker-color);
        }

    .faq summary:focus-visible {
            outline: none;
        }

@container (width < 1000px) {
        .faq .row {
            flex-direction: column;
            gap: 0;
        }
}