.event-index {
	max-width: 100%;
	padding: 1rem;
	display: grid;
	grid-template-rows: repeat(5, auto);
	grid-template-areas:
		"title"
		"controls"
		"results"
		"pagination"
		"actions"
	;
	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;

		#facet {
			position: sticky;
			inset-block-start: 1rem;
			inset-inline: auto;
			inline-size: auto;
			max-inline-size: 25rem;
			block-size: fit-content;
			align-self: start;
			box-shadow: none;
			display: grid;
			padding: 1rem;
			popover: none;
			translate: none;
		}
	}
}