/* ################################################## */
/* Grid container (wrapper) */
/* ################################################## */

.grid-container {
	display: grid;
	grid-template-columns:
		[full-start] 1fr [wrapper-start] minmax(0, 80rem)
		[wrapper-end] 1fr [full-end];
	grid-column-gap: var(--spacing-md);
	/* overflow: hidden; */
	contain: paint;
}

.grid-container > * {
	grid-column: wrapper;
	border-left: 1px solid var(--color-gray);
	border-right: 1px solid var(--color-gray);
	border: none;
}

.grid-container--fill {
	grid-column: full;
}

@media (max-width: 479px) {
	.grid-container > * {
		border: none;
	}
}

/* ################################################## */
/* TESTING
/* ################################################## */

body {
	height: 500vh;
}

.nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 8rem;
	background-color: #dfdfdf;
	z-index: 1000;
}

.nav__inner {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding-bottom: 1rem;
}

.nav__logo {
	height: 2rem;
}

.hero {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #a8a8a8;
}

.hero__text {
	font-size: var(--fz-xl);
	margin-bottom: 2rem;
}

.configurator {
	padding: 12.25rem 0 8rem 0;
}

.configurator__inner {
	height: 5rem;
	background-color: gray;
}

.configurator__main-container {
	height: 5rem;
	background-color: #6b6b6b;
}

.configurator__summary-container {
	height: 5rem;
	background-color: #6b6b6b;
}