/**
 * Journey page.
 */

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

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

.journey-intro {
	padding-block: clamp(4.75rem, 7.5vw, 6.75rem);
	background: #f8f5ec;
}

.journey-intro__title {
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	font-size: clamp(2.9rem, 5vw, 4.5rem);
	font-weight: 500;
	line-height: 1.12;
}

.journey-intro__text {
	max-width: 52rem;
	margin: 0;
	font-size: clamp(1.08rem, 1.6vw, 1.28rem);
	line-height: 2;
}

.journey-panel {
	padding-block: clamp(4rem, 6.5vw, 6rem);
}

.journey-panel--ivory {
	background: #f8f5ec;
}

.journey-panel__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
	gap: clamp(3rem, 6vw, 5.75rem);
	align-items: center;
}

.journey-panel__media {
	grid-column: 1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-large);
	aspect-ratio: 4 / 3;
	background: #cfc9bd;
}

.journey-panel__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.82) sepia(0.08) brightness(1.02);
}

.journey-panel__content {
	grid-column: 2;
}

.journey-panel--reverse .journey-panel__media {
	grid-column: 2;
}

.journey-panel--reverse .journey-panel__content {
	grid-column: 1;
	grid-row: 1;
}

.journey-panel__content::before {
	display: block;
	width: 3.25rem;
	height: 2px;
	margin-block-end: 1.5rem;
	background: #dccb8a;
	content: "";
}

.journey-panel__title {
	margin: 0 0 0.75rem;
	font-size: clamp(2.3rem, 3.8vw, 3.45rem);
	font-weight: 500;
	line-height: 1.2;
}

.journey-panel__phrase {
	margin: 0;
	color: #5f5b54;
	font-size: clamp(1.1rem, 1.8vw, 1.3rem);
	line-height: 1.75;
}

@media (max-width: 56rem) {
	.journey-container,
	.journey-panel__inner {
		width: min(calc(100% - 2rem), 42rem);
	}

	.journey-intro {
		padding-block: clamp(4rem, 15vw, 6rem);
	}

	.journey-panel {
		padding-block: clamp(3.5rem, 12vw, 5rem);
	}

	.journey-panel__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.journey-panel__media,
	.journey-panel--reverse .journey-panel__media {
		grid-column: 1;
		grid-row: 1;
	}

	.journey-panel__content,
	.journey-panel--reverse .journey-panel__content {
		grid-column: 1;
		grid-row: 2;
	}
}

@media (max-width: 32rem) {
	.journey-intro__title {
		font-size: 2.8rem;
	}

	.journey-intro__text {
		font-size: 1.05rem;
		line-height: 1.9;
	}

	.journey-panel__title {
		font-size: 2.35rem;
	}
}