/* =========================================================
   GPN — WHY GIFT A PIECE OF NATURE
========================================================= */

.gpn-why {

	position: relative;

	padding: 150px 0 145px;

	background: #203727;

	color: #f5f1e7;

	overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.gpn-why__container {

	width:
		min(
			1340px,
			calc(100% - 80px)
		);

	margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.gpn-why__header {

	max-width: 900px;

	margin-bottom: 75px;

}


.gpn-why__eyebrow {

	display: flex;

	align-items: center;

	gap: 16px;

	margin-bottom: 22px;

	color: #d0b066;

	font-family: Arial, sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 2.5px;

	text-transform: uppercase;

}


.gpn-why__eyebrow::after {

	content: "";

	width: 65px;

	height: 1px;

	background: #8f7b4c;

}


.gpn-why__title {

	margin: 0;

	color: #f4f0e6;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			54px,
			6vw,
			86px
		);

	font-weight: 400;

	line-height: .9;

	letter-spacing: -4px;

}


.gpn-why__title em {

	display: block;

	color: #9eaf83;

	font-style: italic;

}


/* =========================================================
   EDITORIAL GRID
========================================================= */

.gpn-why__editorial {

	display: grid;

	grid-template-columns:
		.92fr
		1.08fr;

	gap: 100px;

	align-items: center;

}


/* =========================================================
   VISUAL
========================================================= */

.gpn-why__visual {

	position: relative;

	padding:
		0 30px
		30px 0;

}


.gpn-why__image {

	height: 670px;

	overflow: hidden;

	background: #314735;

}


.gpn-why__image img {

	width: 100%;

	height: 100%;

	display: block;

	object-fit: cover;

	transition:
		transform
		1.4s
		cubic-bezier(
			.2,
			.65,
			.2,
			1
		);

}


.gpn-why__visual:hover
.gpn-why__image img {

	transform: scale(1.045);

}


.gpn-why__image::after {

	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(
				7,
				22,
				11,
				.48
			),
			transparent 45%
		);

	pointer-events: none;

}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.gpn-why__image-caption {

	position: absolute;

	right: 48px;

	bottom: 53px;

	left: 18px;

	z-index: 3;

	display: flex;

	justify-content: space-between;

	color: rgba(
		255,
		255,
		255,
		.86
	);

	font-family: Arial, sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 2px;

}


/* =========================================================
   SEAL
========================================================= */

.gpn-why__seal {

	position: absolute;

	right: 0;

	bottom: 0;

	width: 105px;

	height: 105px;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	background: #d5b45e;

	color: #213827;

}


.gpn-why__seal span {

	font-family: Arial, sans-serif;

	font-size: 7px;

	font-weight: 700;

	letter-spacing: 2px;

}


.gpn-why__seal strong {

	margin: 5px 0;

	font-family: Georgia, serif;

	font-size: 22px;

	font-weight: 400;

}


/* =========================================================
   CONTENT
========================================================= */

.gpn-why__content {

	max-width: 600px;

}


.gpn-why__lead {

	margin: 0 0 45px;

	color: #cdd4c7;

	font-family:
		Georgia,
		serif;

	font-size:
		clamp(
			23px,
			2.3vw,
			32px
		);

	line-height: 1.45;

}


.gpn-why__lead strong {

	display: block;

	color: #9fb184;

	font-weight: 400;

	font-style: italic;

}


/* =========================================================
   BENEFITS
========================================================= */

.gpn-why__benefits {

	border-top: 1px solid
		rgba(
			255,
			255,
			255,
			.15
		);

}


.gpn-why-benefit {

	display: grid;

	grid-template-columns:
		50px
		1fr;

	gap: 20px;

	padding:
		28px
		0
		30px;

	border-bottom: 1px solid
		rgba(
			255,
			255,
			255,
			.15
		);

	transition:
		padding .35s ease,
		background .35s ease;

}


.gpn-why-benefit:hover {

	padding-left: 18px;

	background:
		rgba(
			255,
			255,
			255,
			.025
		);

}


.gpn-why-benefit__number {

	color: #b79b5c;

	font-family:
		Georgia,
		serif;

	font-size: 15px;

}


.gpn-why-benefit h3 {

	margin: 0 0 8px;

	color: #f2eee4;

	font-family:
		Georgia,
		serif;

	font-size: 22px;

	font-weight: 400;

}


.gpn-why-benefit p {

	max-width: 500px;

	margin: 0;

	color: #9da79c;

	font-family: Arial, sans-serif;

	font-size: 10.5px;

	line-height: 1.8;

}


/* =========================================================
   STATEMENT
========================================================= */

.gpn-why__statement {

	display: grid;

	grid-template-columns:
		55px
		1fr
		auto;

	align-items: center;

	gap: 35px;

	margin-top: 125px;

	padding:
		45px
		0
		45px;

	border-top: 1px solid
		rgba(
			255,
			255,
			255,
			.16
		);

	border-bottom: 1px solid
		rgba(
			255,
			255,
			255,
			.16
		);

}


.gpn-why__statement-number {

	color: #b99c5c;

	font-family:
		Georgia,
		serif;

	font-size: 16px;

}


.gpn-why__statement-content > span {

	display: block;

	margin-bottom: 9px;

	color: #a58d59;

	font-family: Arial, sans-serif;

	font-size: 7px;

	font-weight: 700;

	letter-spacing: 2px;

}


.gpn-why__statement-content p {

	max-width: 720px;

	margin: 0;

	color: #d9ddd4;

	font-family:
		Georgia,
		serif;

	font-size:
		clamp(
			20px,
			2.3vw,
			30px
		);

	line-height: 1.3;

}


.gpn-why__statement-content strong {

	color: #a3b58a;

	font-weight: 400;

	font-style: italic;

}


.gpn-why__shop {

	display: inline-flex;

	align-items: center;

	gap: 13px;

	padding:
		14px
		18px;

	border: 1px solid
		rgba(
			213,
			180,
			94,
			.55
		);

	color: #e0c47a;

	font-family: Arial, sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 1.5px;

	text-decoration: none;

	text-transform: uppercase;

	white-space: nowrap;

	transition:
		background .3s ease,
		color .3s ease;

}


.gpn-why__shop strong {

	font-size: 14px;

	font-weight: 400;

}


.gpn-why__shop:hover {

	background: #d5b45e;

	color: #203727;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

	.gpn-why {

		padding:
			105px 0;

	}


	.gpn-why__container {

		width:
			calc(
				100% - 50px
			);

	}


	.gpn-why__editorial {

		gap: 50px;

	}


	.gpn-why__image {

		height: 570px;

	}


	.gpn-why__statement {

		grid-template-columns:
			45px
			1fr;

	}


	.gpn-why__shop {

		grid-column: 2;

		justify-self: start;

	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

	.gpn-why {

		padding:
			80px 0;

	}


	.gpn-why__container {

		width:
			calc(
				100% - 30px
			);

	}


	.gpn-why__title {

		font-size: 50px;

		letter-spacing: -2.5px;

	}


	.gpn-why__editorial {

		display: flex;

		flex-direction: column;

		gap: 55px;

	}


	.gpn-why__visual {

		width: 100%;

		padding:
			0 20px
			25px 0;

	}


	.gpn-why__image {

		height: 500px;

	}


	.gpn-why__image-caption {

		right: 37px;

		bottom: 44px;

	}


	.gpn-why__seal {

		width: 82px;

		height: 82px;

	}


	.gpn-why__lead {

		font-size: 22px;

	}


	.gpn-why-benefit {

		grid-template-columns:
			35px
			1fr;

		gap: 12px;

	}


	.gpn-why-benefit h3 {

		font-size: 20px;

	}


	.gpn-why__statement {

		display: flex;

		align-items: flex-start;

		flex-direction: column;

		gap: 20px;

		margin-top: 80px;

		padding:
			40px 0;

	}


	.gpn-why__statement-content p {

		font-size: 23px;

	}


	.gpn-why__shop {

		margin-top: 5px;

	}

}