qs-auto-suggest {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: min-content;
/*    grid-template-rows: min-content min-content auto;*/
    grid-gap: 0;
    & input {
        min-width: 100px;
        margin: 0 2px;
        padding: 0 1.4em;
        line-height: calc(2.65em - 2px);
        font-size: var(--font-size-step-1);
        font-weight: 700;
        border: 1px solid var(--input-colour, var(--border-colour));
        border-radius: var(--border-radius);
        &:focus-visible {
            outline: none;
            box-shadow: 0 0 2px 1px var(--primary-accent-colour);
        }
    }
    & ul {
        background-color: white;
        border: 1px solid var(--input-colour, var(--border-colour));
        margin: 0 2px;
        padding: 0;
        line-height: calc(2.65em - 2px);
        font-size: var(--font-size-step-1);
        font-weight: 700;
        height: fit-content;
        max-height: calc((2.65em - 2px) * 5.5);
        overflow-y: scroll;
        & li {
            margin: 0;
            padding: 0 1.4em;
            &:hover {
                background-color: var(--primary-accent-colour);
                color: white;
            }
        }
        &.hidden {
            display: none;
        }
    }
    & h3 {
        margin-top: 2em;
    }
}