/* =========================================================
   GPN — ARTISTIC CATEGORY SECTION
========================================================= */

.gpn-categories {
	position: relative;

	padding: 125px 0 135px;

	overflow: hidden;

	background: #f5f2e9;

	color: #173a20;
}


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

.gpn-container {
	width: min(1200px, 92%);

	margin: 0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.gpn-categories-intro {
	display: grid;

	grid-template-columns:
		.7fr
		1.3fr;

	align-items: end;

	gap: 70px;

	margin-bottom: 62px;
}


/* =========================================================
   LABEL
========================================================= */

.gpn-section-label {
	display: flex;

	align-items: center;

	gap: 12px;

	color: #b18a2e;

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 3px;

	text-transform: uppercase;
}


.gpn-section-label-line {
	width: 35px;
	height: 1px;

	background: #b18a2e;
}


/* =========================================================
   HEADING
========================================================= */

.gpn-categories-heading h2 {
	max-width: 720px;

	margin: 0;

	color: #173a20;

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

	font-size: clamp(48px, 6vw, 78px);

	font-weight: 400;

	line-height: .95;

	letter-spacing: -2.5px;
}


.gpn-categories-heading h2 em {
	display: block;

	color: #6b8b55;

	font-style: italic;
}


.gpn-categories-heading p {
	max-width: 510px;

	margin: 27px 0 0;

	color: rgba(23,58,32,.65);

	font-size: 15px;

	line-height: 1.8;
}


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

.gpn-category-grid {
	display: grid;

	grid-template-columns:
		repeat(2, 1fr);

	grid-auto-rows: 360px;

	gap: 18px;
}


/* =========================================================
   CARD
========================================================= */

.gpn-category-card {
	position: relative;

	display: block;

	overflow: hidden;

	min-height: 360px;

	color: #fff;

	background: #173a20;

	text-decoration: none;
}


/*
 * First card becomes larger.
 */

.gpn-category-card-large {
	grid-row: span 1;

	min-height: 738px;
}


/*
 * Fourth card stretches across.
 */

.gpn-category-card-wide {
	grid-column: 2 / -1;

	min-height: 310px;
}


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

.gpn-category-image {
	position: absolute;

	inset: 0;

	overflow: hidden;
}


.gpn-category-image img {
	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;

	transform: scale(1.01);

	transition:
		transform 1s cubic-bezier(.2,.6,.2,1);
}


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

.gpn-category-card:hover
.gpn-category-image img {
	transform: scale(1.075);
}


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

.gpn-category-overlay {
	position: absolute;

	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			180deg,
			rgba(5,20,10,.03) 15%,
			rgba(5,20,10,.16) 45%,
			rgba(5,20,10,.86) 100%
		);

	transition:
		background .5s ease;
}


.gpn-category-card:hover
.gpn-category-overlay {
	background:
		linear-gradient(
			180deg,
			rgba(5,20,10,.08),
			rgba(5,20,10,.88)
		);
}


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

.gpn-category-content {
	position: absolute;

	inset: auto 28px 28px 28px;

	z-index: 3;

	display: grid;

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

	align-items: end;

	gap: 16px;
}


/* =========================================================
   NUMBER
========================================================= */

.gpn-category-number {
	align-self: start;

	padding-top: 4px;

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

	font-size: 10px;

	font-weight: 700;

	letter-spacing: 2px;
}


/* =========================================================
   KICKER
========================================================= */

.gpn-category-kicker {
	display: block;

	margin-bottom: 7px;

	color: #e2bb5d;

	font-size: 9px;

	font-weight: 800;

	letter-spacing: 2px;

	text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.gpn-category-content h3 {
	margin: 0;

	color: #fff;

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

	font-size: clamp(26px, 3vw, 39px);

	font-weight: 400;

	line-height: 1.05;

	letter-spacing: -.7px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.gpn-category-content p {
	margin: 9px 0 0;

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

	font-size: 12px;

	line-height: 1.5;
}


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

.gpn-category-arrow {
	width: 44px;
	height: 44px;

	display: flex;

	align-items: center;
	justify-content: center;

	color: #173a20;

	background: #dfb653;

	border-radius: 50%;

	font-size: 19px;

	transform: translateY(8px);

	transition:
		transform .35s ease,
		background .35s ease;
}


.gpn-category-card:hover
.gpn-category-arrow {
	background: #edce78;

	transform:
		translateY(0)
		rotate(8deg);
}


/* =========================================================
   FOOTER LINK
========================================================= */

.gpn-categories-footer {
	display: flex;

	justify-content: flex-end;

	margin-top: 32px;
}


.gpn-text-link {
	display: inline-flex;

	align-items: center;

	gap: 20px;

	color: #173a20;

	border-bottom: 1px solid rgba(23,58,32,.35);

	padding-bottom: 7px;

	font-size: 11px;

	font-weight: 800;

	letter-spacing: 1px;

	text-transform: uppercase;

	text-decoration: none;

	transition:
		color .3s ease,
		gap .3s ease,
		border-color .3s ease;
}


.gpn-text-link:hover {
	gap: 27px;

	color: #a77d21;

	border-color: #a77d21;
}


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

@media (max-width: 900px) {

	.gpn-categories {
		padding: 90px 0 100px;
	}


	.gpn-categories-intro {
		grid-template-columns: 1fr;

		gap: 25px;

		margin-bottom: 45px;
	}


	.gpn-category-grid {
		grid-auto-rows: 320px;
	}


	.gpn-category-card-large {
		min-height: 658px;
	}


	.gpn-category-card-wide {
		min-height: 340px;
	}

}


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

@media (max-width: 600px) {

	.gpn-categories {
		padding: 75px 0 80px;
	}


	.gpn-container {
		width: 88%;
	}


	.gpn-categories-heading h2 {
		font-size: 48px;

		letter-spacing: -1.5px;
	}


	.gpn-categories-heading p {
		font-size: 14px;
	}


	.gpn-category-grid {
		grid-template-columns: 1fr;

		grid-auto-rows: 390px;

		gap: 12px;
	}


	.gpn-category-card,
	.gpn-category-card-large,
	.gpn-category-card-wide {
		grid-column: auto;

		grid-row: auto;

		min-height: 390px;
	}


	.gpn-category-content {
		inset: auto 21px 21px 21px;

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

		gap: 9px;
	}


	.gpn-category-content h3 {
		font-size: 28px;
	}


	.gpn-category-arrow {
		width: 38px;
		height: 38px;

		font-size: 16px;
	}


	.gpn-categories-footer {
		justify-content: flex-start;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.gpn-category-image img,
	.gpn-category-overlay,
	.gpn-category-arrow,
	.gpn-text-link {
		transition: none;
	}

}