/* =========================================================
   GPN — TEAM
========================================================= */

.gpn-team {

	position: relative;

	padding: 140px 0 145px;

	background: #faf8f2;

	color: #1b3021;

	overflow: hidden;

}


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

.gpn-team__container {

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

	margin: 0 auto;

}


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

.gpn-team__header {

	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	gap: 70px;

	margin-bottom: 70px;

}


.gpn-team__eyebrow {

	display: flex;

	align-items: center;

	gap: 14px;

	margin-bottom: 20px;

	color: #8a6c32;

	font-family: Arial, sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 2.5px;

	text-transform: uppercase;

}


.gpn-team__eyebrow::after {

	content: "";

	width: 60px;

	height: 1px;

	background: #ad965e;

}


.gpn-team__title {

	max-width: 700px;

	margin: 0;

	color: #1a3422;

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

	font-size:
		clamp(
			50px,
			5.2vw,
			74px
		);

	font-weight: 400;

	line-height: .92;

	letter-spacing: -3.5px;

}


.gpn-team__title em {

	display: block;

	color: #71865e;

	font-style: italic;

}


.gpn-team__intro {

	max-width: 330px;

	margin: 0;

	color: #6b736b;

	font-family: Arial, sans-serif;

	font-size: 12px;

	line-height: 1.85;

}


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

.gpn-team__grid {

	display: grid;

	grid-template-columns:
		1fr
		1fr;

	gap: 55px;

}


/* =========================================================
   TEAM MEMBER
========================================================= */

.gpn-team-member {

	position: relative;

}


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

.gpn-team-member__visual {

	position: relative;

	aspect-ratio: 4 / 5;

	overflow: hidden;

	background: #e2ded3;

}


.gpn-team-member__image {

	position: absolute;

	inset: 0;

	overflow: hidden;

}


.gpn-team-member__image img {

	width: 100%;

	height: 100%;

	display: block;

	object-fit: cover;

	filter: saturate(.88);

	transition:
		transform 1.1s
		cubic-bezier(
			.2,
			.65,
			.2,
			1
		),
		filter .5s ease;

}


.gpn-team-member:hover
.gpn-team-member__image img {

	transform: scale(1.045);

	filter: saturate(1);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.gpn-team-member__visual::after {

	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(
				16,
				35,
				20,
				.48
			),
			transparent 45%
		);

	pointer-events: none;

}


/* =========================================================
   IMAGE META
========================================================= */

.gpn-team-member__overlay {

	position: absolute;

	z-index: 3;

	top: 22px;

	right: 24px;

	left: 24px;

	display: flex;

	align-items: center;

	justify-content: space-between;

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

	font-family: Arial, sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 2px;

}


/* =========================================================
   ARROW
========================================================= */

.gpn-team-member__circle {

	position: absolute;

	right: 25px;

	bottom: 25px;

	z-index: 4;

	width: 45px;

	height: 45px;

	display: grid;

	place-items: center;

	border: 1px solid
		rgba(
			255,
			255,
			255,
			.7
		);

	border-radius: 50%;

	color: white;

	font-size: 15px;

	opacity: .8;

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

}


.gpn-team-member:hover
.gpn-team-member__circle {

	background: #d5b45e;

	border-color: #d5b45e;

	color: #203827;

	transform: rotate(45deg);

}


/* =========================================================
   INFO
========================================================= */

.gpn-team-member__info {

	display: grid;

	grid-template-columns:
		.8fr
		1.2fr;

	gap: 30px;

	padding-top: 24px;

}


.gpn-team-member__info h3 {

	margin: 0 0 8px;

	color: #1b3423;

	font-family:
		Georgia,
		serif;

	font-size: 28px;

	font-weight: 400;

	line-height: 1;

}


.gpn-team-member__info span {

	color: #8a6e38;

	font-family: Arial, sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 1.7px;

	text-transform: uppercase;

}


.gpn-team-member__info p {

	margin: 0;

	color: #707870;

	font-family: Arial, sans-serif;

	font-size: 10.5px;

	line-height: 1.8;

}


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

.gpn-team__statement {

	display: flex;

	align-items: center;

	gap: 30px;

	margin-top: 115px;

}


.gpn-team__statement-line {

	flex: 1;

	height: 1px;

	background: #d2d0c5;

}


.gpn-team__statement p {

	max-width: 520px;

	margin: 0;

	text-align: center;

	color: #526153;

	font-family:
		Georgia,
		serif;

	font-size: 21px;

	line-height: 1.45;

	font-style: italic;

}


.gpn-team__statement strong {

	color: #6f855b;

	font-weight: 400;

}


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

@media (max-width: 900px) {

	.gpn-team {

		padding:
			105px 0;

	}


	.gpn-team__container {

		width:
			calc(
				100% - 50px
			);

	}


	.gpn-team__header {

		align-items: flex-start;

		flex-direction: column;

		gap: 30px;

	}


	.gpn-team__grid {

		gap: 35px;

	}


	.gpn-team-member__info {

		display: block;

	}


	.gpn-team-member__info p {

		margin-top: 18px;

	}

}


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

@media (max-width: 650px) {

	.gpn-team {

		padding:
			80px 0;

	}


	.gpn-team__container {

		width:
			calc(
				100% - 30px
			);

	}


	.gpn-team__title {

		font-size: 48px;

		letter-spacing: -2.5px;

	}


	.gpn-team__grid {

		grid-template-columns: 1fr;

		gap: 60px;

	}


	.gpn-team-member__visual {

		aspect-ratio: 4 / 5;

	}


	.gpn-team-member__info h3 {

		font-size: 26px;

	}


	.gpn-team__statement {

		margin-top: 80px;

	}


	.gpn-team__statement-line {

		display: none;

	}


	.gpn-team__statement p {

		font-size: 19px;

	}

}