/* Shared content container and default page spacing. */
.wrap {
	width: min(100% - 3rem, 1320px);
	margin-inline: auto;
}

.content {
	padding-block: clamp(6rem, 12vw, 12rem);
}

/* The body around a navy hero matches the transparent header. */
.has-navy-hero {
	background: var(--navy-900);
}

.has-navy-hero main {
	background: var(--white);
}

/* Administrator component-library layout. */
.library-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	align-items: center;
	gap: 3rem;
}

.library-stack {
	display: grid;
	gap: 2rem;
	margin: 3rem 0;
}

.library-stack .card {
	min-height: 13rem;
}

.library-reel {
	gap: 1.5rem;
	padding: 2rem 0;
}

.library-reel .card {
	width: min(70vw, 32rem);
	min-height: 18rem;
}

.marquee-band {
	background: var(--navy-700);
	color: #fff;
	padding: 1.2rem 0;
	font-family: var(--font-mono);
	white-space: nowrap;
}

.marquee-band span {
	padding-right: 1rem;
}

.library-phone {
	margin-top: 4rem;
}

.library-fields {
	display: grid;
	gap: 1.5rem;
	max-width: 40rem;
	margin-top: 3rem;
}

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

	.library-hero .hex-field {
		width: min(70%, 300px);
		margin: auto;
	}

	.library-reel .card {
		width: 100%;
	}
}