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

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

	.splash { grid-area: splash; }
	.list {
        grid-area: details;
        padding: 1rem;
    }
	.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);
		}
	}
}