#event-index {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

    .page-title { grid-area: unset; }

    .actions { display: none; }

    @media (min-width: 50em) {
        grid-template-columns: minmax(18rem, 20%) 1fr minmax(18rem, 20%);
        grid-template-areas:
            "navigation title actions"
            "navigation main actions";
        gap: 2rem;
        padding-inline: 2rem;
        padding-block-start: 2rem;

        .page-title { grid-area: title; }

        #facet {
            grid-area: navigation;
        }

        > .event-results {
            grid-area: main;
            grid-row: 2;
        }

        > .actions {
            display: grid;
            grid-area: actions;
        }
    }
}