qs-question {
    --animation-speed: .2s;
    display: none;
    height: 100%;
    overflow: hidden;
    grid-auto-rows: min-content minmax(0, 1fr);
    grid-gap: 1em;
    & > h2 {
        font-size: var(--font-size-step-1);
        font-weight: 400;
        text-align: center;
    }
    &.activate {
        display: grid;
        animation-duration: var(--animation-speed);
        animation-fill-mode: both;
        animation-name: slideIn;
    }
    &.deactivate {
        display: grid;
        animation-duration: var(--animation-speed);
        animation-fill-mode: both;
        animation-name: slideOut;
    }
    &.active {
        display: grid;
    }
    &.no-title {
        grid-auto-rows: 1fr;
    }
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(0, -30px);
    }
    to {
        opacity: 1.0;
        transform: translate(0, 0px);
    }
}
@keyframes slideOut {
    from {
        opacity: 1.0;
        transform: translate(0, 0px);
    }
    to {
        opacity: 0;
        transform: translate(0, 30px);
    }
}