#event-display {
	display: grid;
	grid-template-areas:
		'splash'
		'content'
		'menu'
		'actions'
	;
	row-gap: 0.5rem;

	.menu {
		grid-area: menu;
		display: none;
	}

	.content {
		grid-area: content;
		display: grid;
		align-content: start;

		.event-dates {
			margin-block: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1rem;
		}

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

		.badges-heading {
			display: flex;
			justify-content: center;
			gap: 0.5rem;
		}
	}

	@media (min-width: 50em) {
		grid-template-columns: 275px 1fr 275px;
		grid-template-rows: 310px auto;
		grid-template-areas:
			'menu splash splash'
			'menu content actions';

		.menu {
			display: block;
			height: 100%;
			background-color: var(--black);
		}
	}
}