/* =============================================================================
   Playground page
   ============================================================================= */

.hero {
	font-size: calc(var(--font-size)*3);
	margin: auto;
	text-align: center;
}

section {
	width: 65rem;
	margin: auto;
	margin-top: calc(var(--margin)*3);
}

.sub {
	text-align: center;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: 65rem;
	margin: auto;
	align-items: center;
	justify-content: center;
	margin-top: calc(var(--margin)*3);
}


video, img {
	width: 80%;
	border-radius: calc(var(--border-radius)/1.2);
	overflow: hidden;
}

.grid-item {
	width: fit-content;
}


.highlight {
	background-color: var(--black);
	color: var(--white);
}

/* Narrow viewports — prevent fixed 65rem from forcing horizontal scroll */
@media (max-width: 1100px) {
	section,
	.grid {
		width: 100%;
		max-width: 100%;
		padding-left: var(--padding);
		padding-right: var(--padding);
		box-sizing: border-box;
	}

	.grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.grid {
		grid-template-columns: 1fr;
	}
}