.event-index {
	max-width: 100%;
	padding: 1rem;
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-template-areas:
		"title"
		"controls"
		"results"
		"pagination"
	;
	gap: 1rem;

	#page-title { grid-area: title }
	#event-results { grid-area: results }
	#facet { grid-area: navigation }
	.actions { grid-area: actions }
	.control-bar { grid-area: controls }
	.pagination { grid-area: pagination }

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