#event-index {
    max-width: 100%;
    padding: 1rem;
    display: grid;
    grid-template-areas:
        "title"
        "results"
    ;
    gap: 1rem;

    .event-results { grid-area: results; }
    #facet { grid-area: navigation; }

    @media (min-width: 50em) {
        padding: 2rem 2rem 0;
        grid-template-columns: minmax(18rem, 20%) 1fr minmax(18rem, 20%);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "navigation title actions"
            "navigation results actions";
        align-items: start;
    }
}