/* ==========================================
   VIDEO GALLERY
========================================== */

.prime-videos {
	background: #101720;
	padding: 82px 24px 88px;
}

.prime-videos__container {
	width: min(100%, 1260px);
	margin-inline: auto;
}

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

.prime-videos__header {
	max-width: 660px;
	margin: 0 auto 44px;
	text-align: center;
}

.prime-videos__eyebrow {
	margin: 0 0 10px;

	color: var(--color-gold);
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.prime-videos__title {
	position: relative;
	display: inline-block;

	margin: 0;

	color: #ffffff;
	font-family: var(--font-heading);
	font-size: clamp(2.1rem, 3.2vw, 3rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
}

.prime-videos__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;

	width: 42px;
	height: 2px;

	background: var(--color-gold);
	transform: translateX(-50%);
}

.prime-videos__intro {
	max-width: 560px;
	margin: 28px auto 0;

	color: rgba(255, 255, 255, 0.64);
	font-size: 0.82rem;
	line-height: 1.65;
}

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

.prime-videos__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 26px;
}

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

.prime-video-card__link {
	display: block;

	color: inherit;
	text-decoration: none;
}

.prime-video-card__thumbnail-wrap {
	position: relative;
	overflow: hidden;

	aspect-ratio: 16 / 9;

	background: #1b2431;
	border-radius: 3px;
}

.prime-video-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;

	padding: 6px 10px;

	background: var(--color-gold);
	color: #101720;

	border-radius: 3px;

	font-size: 0.58rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.prime-video-card__thumbnail {
	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 280ms ease,
		filter 280ms ease;
}

.prime-video-card__play {
	position: absolute;
	left: 50%;
	top: 50%;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	background: var(--color-gold);
	color: #101720;

	border-radius: 50%;

	transform: translate(-50%, -50%);
	transition:
		transform 180ms ease,
		background 180ms ease;
}

.prime-video-card__play svg {
	width: 23px;
	height: 23px;

	fill: currentColor;
	stroke: none;
}

.prime-video-card__youtube {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	gap: 5px;

	padding: 6px 9px;

	background: #ff2b2b;
	color: #ffffff;

	border-radius: 3px;

	font-size: 0.58rem;
	font-weight: 600;
	line-height: 1;
}

.prime-video-card__youtube svg {
	width: 13px;
	height: 13px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.prime-video-card__title {
	margin: 14px 0 0;

	color: rgba(255, 255, 255, 0.95);
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.prime-video-card__link:hover .prime-video-card__thumbnail,
.prime-video-card__link:focus-visible .prime-video-card__thumbnail {
	transform: scale(1.045);
	filter: brightness(0.82);
}

.prime-video-card__link:hover .prime-video-card__play,
.prime-video-card__link:focus-visible .prime-video-card__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #ffb000;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 900px) {

	.prime-videos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.prime-videos {
		padding: 58px 18px 62px;
	}

	.prime-videos__header {
		margin-bottom: 34px;
	}

	.prime-videos__eyebrow {
		font-size: 0.62rem;
	}

	.prime-videos__title {
		font-size: 2rem;
	}

	.prime-videos__intro {
		margin-top: 24px;
		font-size: 0.76rem;
	}

	.prime-videos__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.prime-video-card__title {
		font-size: 0.8rem;
	}
}