#event-display {
	display: grid;
	grid-template-areas:
		'splash'
		'details'
		'menu'
		'actions'
	;

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

	.splash { grid-area: splash; }
	.details { grid-area: details; }
	.actions { grid-area: actions; }

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

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