/* =========================================================
   GPN — INSTAGRAM REELS
========================================================= */

.gpn-instagram {
	position: relative;

	padding: 125px 0 130px;

	background: #173d27;

	color: #fff;

	overflow: hidden;
}


.gpn-instagram__container {
	width: min(1380px, calc(100% - 80px));

	margin: 0 auto;
}


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

.gpn-instagram__header {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 70px;

	margin-bottom: 58px;
}


.gpn-instagram__eyebrow {
	display: block;

	margin-bottom: 18px;

	color: #d8b35b;

	font-family: Arial, sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 2.8px;

	text-transform: uppercase;
}


.gpn-instagram__title {
	max-width: 650px;

	margin: 0;

	color: #f7f4eb;

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

	font-size: clamp(48px, 5.4vw, 74px);

	font-weight: 400;

	line-height: .95;

	letter-spacing: -3px;
}


.gpn-instagram__title em {
	display: block;

	color: #b8c79e;

	font-style: italic;
}


.gpn-instagram__header-right {
	max-width: 330px;

	padding-bottom: 4px;
}


.gpn-instagram__header-right p {
	margin: 0 0 22px;

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

	font-family: Arial, sans-serif;

	font-size: 12px;

	line-height: 1.8;
}


.gpn-instagram__follow {
	display: inline-flex;

	align-items: center;

	gap: 14px;

	padding-bottom: 8px;

	border-bottom: 1px solid rgba(216,179,91,.7);

	color: #f5f1e6;

	font-family: Arial, sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 1.3px;

	text-decoration: none;

	text-transform: uppercase;

	transition: gap .3s ease;
}


.gpn-instagram__follow:hover {
	gap: 22px;

	color: #d8b35b;
}


/* =========================================================
   VIEWPORT
========================================================= */

.gpn-instagram__viewport {
	width: 100%;

	overflow: hidden;
}


.gpn-instagram__track {
	display: flex;

	gap: 20px;

	transition:
		transform .75s cubic-bezier(.22,.61,.36,1);
}


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

.gpn-reel {
	position: relative;

	flex: 0 0 calc(
		25% - 15px
	);

	min-width: 0;

	aspect-ratio: 9 / 14;

	overflow: hidden;

	background: #0e281a;
}


.gpn-reel__link {
	position: absolute;

	inset: 0;

	display: block;

	color: inherit;

	text-decoration: none;
}


.gpn-reel__image {
	position: absolute;

	inset: 0;

	overflow: hidden;
}


.gpn-reel__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

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


.gpn-reel:hover
.gpn-reel__image img {
	transform: scale(1.06);
}


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

.gpn-reel__overlay {
	position: absolute;

	inset: 0;

	z-index: 2;

	background:
		linear-gradient(
			to bottom,
			rgba(0,0,0,.22) 0%,
			transparent 35%,
			rgba(0,0,0,.72) 100%
		);
}


/* =========================================================
   INSTAGRAM ICON
========================================================= */

.gpn-reel__instagram-icon {
	position: absolute;

	top: 18px;
	left: 18px;

	z-index: 5;

	width: 30px;
	height: 30px;

	display: flex;

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

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

	border-radius: 50%;

	background: rgba(0,0,0,.12);

	backdrop-filter: blur(5px);
}


.gpn-reel__instagram-icon svg {
	width: 14px;
	height: 14px;

	fill: none;

	stroke: #fff;

	stroke-width: 1.5;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.gpn-reel__play {
	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 5;

	width: 52px;
	height: 52px;

	display: flex;

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

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

	border-radius: 50%;

	transform:
		translate(-50%, -50%)
		scale(.9);

	opacity: 0;

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


.gpn-reel:hover
.gpn-reel__play {
	opacity: 1;

	transform:
		translate(-50%, -50%)
		scale(1);
}


.gpn-reel__play span {
	width: 0;
	height: 0;

	margin-left: 4px;

	border-top: 6px solid transparent;

	border-bottom: 6px solid transparent;

	border-left: 9px solid #fff;
}


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

.gpn-reel__content {
	position: absolute;

	right: 20px;
	bottom: 20px;
	left: 20px;

	z-index: 5;
}


.gpn-reel__number {
	display: block;

	margin-bottom: 12px;

	color: #d8b35b;

	font-family: Arial, sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 1.8px;
}


.gpn-reel__content h3 {
	margin: 0 0 8px;

	color: #fff;

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

	font-size: 22px;

	font-weight: 400;

	line-height: 1.15;
}


.gpn-reel__content p {
	margin: 0;

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

	font-family: Arial, sans-serif;

	font-size: 9px;

	line-height: 1.5;
}


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

.gpn-reel__arrow {
	position: absolute;

	right: 18px;
	top: 18px;

	z-index: 5;

	width: 32px;
	height: 32px;

	display: flex;

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

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

	border-radius: 50%;

	color: #fff;

	font-size: 13px;

	opacity: 0;

	transform: translateY(-5px);

	transition:
		opacity .3s ease,
		transform .3s ease;
}


.gpn-reel:hover
.gpn-reel__arrow {
	opacity: 1;

	transform: translateY(0);
}


/* =========================================================
   CONTROLS
========================================================= */

.gpn-instagram__controls {
	display: flex;

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

	margin-top: 38px;
}


.gpn-instagram__progress {
	display: flex;

	align-items: center;

	gap: 10px;

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

	font-family: Arial, sans-serif;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: 1.5px;
}


.gpn-instagram__progress-current {
	color: #d8b35b;
}


.gpn-instagram__progress-line {
	position: relative;

	width: 100px;
	height: 1px;

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

	overflow: hidden;
}


.gpn-instagram__progress-line span {
	position: absolute;

	top: 0;
	left: 0;

	width: 16.66%;
	height: 1px;

	background: #d8b35b;

	transition: width .5s ease;
}


.gpn-instagram__arrows {
	display: flex;

	gap: 9px;
}


.gpn-instagram__arrow {
	width: 43px;
	height: 43px;

	display: flex;

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

	padding: 0;

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

	border-radius: 50%;

	background: transparent;

	color: #fff;

	font-size: 16px;

	cursor: pointer;

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


.gpn-instagram__arrow:hover:not(:disabled) {
	background: #d8b35b;

	border-color: #d8b35b;

	color: #173d27;
}


.gpn-instagram__arrow:disabled {
	cursor: default;

	opacity: .25;
}


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

@media (max-width: 1050px) {

	.gpn-instagram__container {
		width: calc(100% - 45px);
	}


	.gpn-reel {
		flex-basis: calc(
			33.333% - 14px
		);
	}

}


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

@media (max-width: 700px) {

	.gpn-instagram {
		padding: 85px 0 90px;
	}


	.gpn-instagram__container {
		width: calc(100% - 30px);
	}


	.gpn-instagram__header {
		flex-direction: column;

		align-items: flex-start;

		gap: 28px;

		margin-bottom: 38px;
	}


	.gpn-instagram__title {
		font-size: 48px;

		letter-spacing: -2px;
	}


	.gpn-instagram__header-right {
		max-width: 430px;
	}


	.gpn-instagram__track {
		gap: 12px;
	}


	.gpn-reel {
		flex-basis: calc(
			50% - 6px
		);
	}


	.gpn-reel__content {
		right: 14px;
		bottom: 15px;
		left: 14px;
	}


	.gpn-reel__content h3 {
		font-size: 17px;
	}


	.gpn-reel__play {
		display: none;
	}

}


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

@media (max-width: 430px) {

	.gpn-reel {
		flex-basis: 78%;
	}


	.gpn-instagram__controls {
		margin-top: 28px;
	}

}