/**
 * Library page.
 */

.library-page {
	background: #fff;
	color: #2f2f2f;
}

.library-container {
	width: min(calc(100% - 3rem), 72rem);
	margin-inline: auto;
}

.library-intro {
	padding-block: clamp(4.25rem, 6vw, 5.5rem);
	background: #f8f5ec;
}

.library-intro__title {
	margin: 0 0 1.5rem;
	font-size: clamp(2.8rem, 4.5vw, 4.1rem);
	font-weight: 600;
	line-height: 1.15;
}

.library-intro__text {
	max-width: 48rem;
	margin: 0;
	font-size: clamp(18px, 1.25vw, 21px);
	line-height: 2;
}

.library-featured {
	padding-block: clamp(4.75rem, 7vw, 6.5rem);
}

.library-featured__inner {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(19rem, 45fr);
	gap: clamp(3rem, 5vw, 5rem);
	align-items: center;
}

.library-material__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-medium);
	background: #cfc9bd;
	aspect-ratio: 4 / 3;
}

.library-material__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.78) contrast(.94) brightness(1.035) sepia(.05);
}

.library-featured__media {
	grid-column: 1;
	border-radius: var(--radius-large);
	aspect-ratio: 4 / 3;
}

.library-featured__content {
	grid-column: 2;
}

.library-material__path {
	margin: 0 0 .625rem;
	color: #766f62;
	font-size: clamp(.875rem, 1.2vw, 1rem);
	font-weight: 600;
}

.library-featured__title,
.library-material__title {
	margin: 0;
	font-weight: 500;
	line-height: 1.4;
}

.library-featured__title {
	font-size: clamp(2.3rem, 3.4vw, 3.25rem);
}

.library-material__title {
	font-size: clamp(1.75rem, 2.35vw, 2.25rem);
}

.library-material__description {
	margin: .875rem 0 1.125rem;
	color: #5f5b54;
	font-size: clamp(16px, 1.1vw, 19px);
	line-height: 1.85;
	text-align: right;
}

.library-featured .library-material__description {
	max-width: 33rem;
	font-size: clamp(16px, 1.1vw, 19px);
}

.library-material__modes {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem 0;
	margin: 0;
	padding: 0;
	color: #8a7443;
	font-size: .86rem;
	font-weight: 500;
	list-style: none;
}

.library-material__modes li + li::before {
	margin-inline: .75rem;
	color: #cfc9bd;
	content: "•";
}

.library-collection {
	padding-block: clamp(4.5rem, 7vw, 6.5rem);
	background: #f8f5ec;
}

.library-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4rem 3rem;
	align-items: start;
}

.library-material__content {
	max-width: 34rem;
	padding-block-start: 1.375rem;
}

@media (min-width: 48rem) {
	.library-intro__text {
		direction: rtl;
		text-align: justify;
		text-align-last: right;
		text-justify: inter-word;
	}
}

@media (max-width: 60rem) {
	.library-featured__inner {
		grid-template-columns: 1fr;
	}

	.library-featured__media,
	.library-featured__content {
		grid-column: 1;
	}

	.library-featured__inner {
		gap: 2.5rem;
	}

	.library-grid { gap: 3.5rem 2rem; }
}

@media (max-width: 40rem) {
	.library-container {
		width: min(calc(100% - 2rem), 34rem);
	}

	.library-intro {
		padding-block: 4.25rem;
	}

	.library-intro__title {
		font-size: 2.75rem;
	}

	.library-featured,
	.library-collection {
		padding-block: 4.5rem;
	}

	.library-featured__media,
	.library-material__media {
		aspect-ratio: 4 / 3;
	}

	.library-grid {
		grid-template-columns: 1fr;
		gap: 3.75rem;
	}

	.library-intro__text,
	.library-material__description {
		text-align: right;
	}
}