qs-section {
    --animation-speed: .2s;
    grid-area: section;
    pointer-events: none;
    height: 100%;
    margin: 0 max(calc((100% - 767px)/2), 0px);
    display: grid;
    grid-template:
        [row1-start] "group-title group-title" min-content [row1-end]
        [row2-start] "questions questions" 1fr [row2-end]
        [row3-start] ". continue" min-content [row3-end]
        / 1fr 1fr
    ;
    grid-template-rows: min-content 1fr min-content;
    overflow: hidden;
    & > h1 {
        grid-area: group-title;
        font-family: var(--header-font);
        font-size: var(--font-size-step-3);
        font-weight: 400;
        text-align: center;
        margin: 1em 0;
        opacity: 0;
    }
    & > :is(svg, p) {
        opacity: 0;
        pointer-events: none;
    }
    & > qs-question {
        grid-area: questions;
    }
    & > :is(.continue, .disabled-continue) {
        grid-area: continue;
        grid-row: 3;
        margin: .5em;
        opacity: 0;
        pointer-events: none;
    }
    &.activate h1 {
        animation-duration: var(--animation-speed);
        animation-fill-mode: both;
        animation-name: fadeIn;
    }
    &.deactivate h1 {
        animation-duration: var(--animation-speed);
        animation-fill-mode: both;
        animation-name: fadeOut;
    }
    &.active h1 {
        opacity: 1.0;
    }
    &.active > :is(svg, p) {
        opacity: 1.0;
        pointer-events: none;
    }
    & > * {
        pointer-events: initial;
    }
    & qs-question.active:has([data-working]) ~ .disabled-continue {
        opacity: 1.0;
        pointer-events: initial;
    }
    & qs-question.active:has([data-complete]) ~ .continue {
        opacity: 1.0;
        pointer-events: initial;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1.0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0;
    }
}