.demo-library {
	min-height: 100svh;
	padding: 13vh 7vw 5rem;
	background: #e7e1d8;
	color: #171716;
}
.demo-library__intro,
.demo-library__grid,
.demo-library__footer {
	width: min(86vw, 1180px);
	margin-right: auto;
	margin-left: auto;
}
.demo-library__intro {
	padding-bottom: 8rem;
}
.demo-library__eyebrow,
.demo-library__card-index,
.demo-library__card-tag,
.demo-library__footer {
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.demo-library__eyebrow {
	color: #716b65;
}
.demo-library h1 {
	max-width: 9ch;
	margin: 1.25rem 0 1.75rem;
	font-size: clamp(4.5rem, 11vw, 10rem);
	line-height: .82;
	letter-spacing: -.055em;
}
.demo-library h1 em {
	color: #cb3b25;
	font-style: normal;
}
.demo-library__lead {
	max-width: 34rem;
	margin: 0;
	color: #625c56;
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.55;
}
.demo-library__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.demo-library__card {
	position: relative;
	display: grid;
	min-height: 27rem;
	grid-template-rows: 1fr auto;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: #1b1b18;
}
.demo-library__card:nth-child(3n + 1) {
	min-height: 35rem;
	grid-row: span 2;
}
.demo-library__card-media,
.demo-library__card::after {
	position: absolute;
	inset: 0;
}
.demo-library__card-media {
	background: var(--demo-image) center / cover;
	filter: saturate(.72) contrast(1.05);
	transform: scale(1.02);
	transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .8s ease;
}
.demo-library__card::after {
	content: '';
	background: linear-gradient(180deg, rgba(15, 15, 14, .05) 20%, rgba(15, 15, 14, .84) 100%);
}
.demo-library__card--warm::after { background: linear-gradient(180deg, rgba(203, 59, 37, .08), rgba(33, 20, 16, .9)); }
.demo-library__card--cool::after { background: linear-gradient(180deg, rgba(39, 68, 82, .06), rgba(10, 27, 31, .92)); }
.demo-library__card--light { color: #171716; background: #f4efec; }
.demo-library__card--light::after { background: linear-gradient(180deg, rgba(244, 239, 236, 0), rgba(244, 239, 236, .92)); }
.demo-library__card:hover .demo-library__card-media,
.demo-library__card:focus-visible .demo-library__card-media {
	filter: saturate(1) contrast(1.08);
	transform: scale(1.08);
}
.demo-library__card-copy {
	position: relative;
	z-index: 1;
	align-self: end;
	padding: 1.4rem;
}
.demo-library__card-index,
.demo-library__card-tag {
	color: rgba(255, 255, 255, .68);
}
.demo-library__card--light .demo-library__card-index,
.demo-library__card--light .demo-library__card-tag { color: #716b65; }
.demo-library__card h2 {
	margin: .6rem 0 .65rem;
	font-size: clamp(2rem, 4vw, 4.5rem);
	line-height: .88;
	letter-spacing: -.05em;
}
.demo-library__card p {
	max-width: 28rem;
	margin: 0 0 1.2rem;
	color: rgba(255, 255, 255, .78);
	font-size: .95rem;
	line-height: 1.45;
}
.demo-library__card--light p { color: #625c56; }
.demo-library__card:focus-visible,
.demo-library__footer a:focus-visible {
	outline: 3px solid #cb3b25;
	outline-offset: 5px;
}
.demo-library__footer {
	display: flex;
	margin-top: 4rem;
	justify-content: space-between;
	gap: 2rem;
	color: #716b65;
}
.demo-library__footer a {
	color: #171716;
	text-underline-offset: .25em;
}
@media (max-width: 767px) {
	.demo-library { padding-top: 9rem; }
	.demo-library__intro { padding-bottom: 4rem; }
	.demo-library h1 { font-size: clamp(4rem, 18vw, 6.5rem); }
	.demo-library__grid { grid-template-columns: 1fr; }
	.demo-library__card,
	.demo-library__card:nth-child(3n + 1) { min-height: 28rem; grid-row: auto; }
	.demo-library__footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
	.demo-library__card-media { transition: none; }
}