#activity-list {
	width: 100%;
	max-width: none;
	display: grid;
	grid-template-areas:
		'splash'
		'details'
		'menu'
		'actions'
	;

	.menu { display: none; }

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

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

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

	.splash { grid-area: splash; }
	.list {
		grid-area: details;
		padding: 1rem;
	}
	.actions { grid-area: actions; }
}