qs-caravan-finder {
    display: grid;
    grid-template: "summary" "questions" "aside";
    grid-template-rows: min-content;
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    grid-gap: .5em;
    height: 100%;
    overflow: auto;
    & .summary {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto;
        place-content: center;
        place-items: center;
        grid-gap: .25em;
        font-size: var(--font-size-step-1);
        font-weight: 400;
        line-height: 1em;
        .none-selected {
            display: inline;
            &.hide {
                display: none;
            }
        }
        .some-selected {
            display: inline;
            &.hide {
                display: none;
            }
        }
        & .edit {
            display: inline-grid;
            grid-auto-flow: column;
            place-items: center;
            font-size: 75%;
            color: var(--primary-accent-colour);
            border-radius: .5em;
            padding: 0 .25em;
            &:empty {
                display: none;
            }
            &:after {
                content: '';
                display: inline-block;
                width: 15px;
                height: 15px;
                margin-left: 3px;
                mask: url('../../images/icons/pen.svg');
                background-color: var(--primary-accent-colour);
            }
        }
    }
    & > *:not(.summary):not(aside) {
        grid-area: questions;
        opacity: 0;
        pointer-events: none;
        height: 0;
        transition: opacity .2s;
    }
    &[data-state=manufacturer] > *:has([name=manufacturer]),
    &[data-state=model] > *:has([name=model]),
    &[data-state=yearofmanufacture] > *:has([name=yearofmanufacture]),
    &[data-state=specificmodel] > *:has([name=specificmodel]) {
        opacity: 1.0;
        pointer-events: initial;
        height: inherit;
    }
    &[data-state=manufacturer] {
        align-content: flex-start;
        & aside {
            display: grid;
        }
    }
    & aside {
        grid-area: aside;
        opacity: 1.0;
        display: none;
        place-items: center;
        background-color: #5054a5;
        color: #fff;
        border-radius: 4px;
        margin: 3em 0 1em;
        padding: 1.5em;
        text-align: center;
        font-weight: 300;
    }
}