/* ==========================================================================
   YouTube video cards (click to play)
   Used on: Photos & Videos, YouTube Videos.
   ========================================================================== */

/* ---------- Videos ---------- */

.video-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.video-card {
	margin: 0;
}

.video-card__play {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ink);
}

.video-card__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.88;
	transition: transform 1s var(--ease), opacity 0.4s;
}

.video-card__play:hover img {
	transform: scale(1.05);
	opacity: 1;
}

.video-card__btn {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--coral-deep);
	color: #fff;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 10px rgba(196, 59, 51, 0.25);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.video-card__btn .icon {
	width: 26px;
	height: 26px;
	fill: currentColor;
	margin-left: 4px;
}

.video-card__play:hover .video-card__btn {
	transform: translate(-50%, -50%) scale(1.08);
	box-shadow: 0 0 0 16px rgba(196, 59, 51, 0.2);
}

.video-card iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--radius);
}

.video-card__title {
	margin-top: 12px;
	font-weight: 700;
	color: var(--ink);
}