.riyadh-video {
	--riyadh-teal: #0e7169;
	box-sizing: border-box;
	max-width: 1500px;
	margin: 28px auto;
	padding: clamp(16px, 3vw, 42px);
	border-radius: 14px;
	background: #edf9f7;
	color: #193530;
}

.riyadh-video > h2,
.riyadh-video-intro {
	margin: 0 0 8px;
	text-align: center;
}

.riyadh-video > h2,
.riyadh-video-group h3 a {
	color: var(--riyadh-teal);
}

.riyadh-video-groups {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(14px, 3vw, 32px);
	margin-top: 18px;
}

.riyadh-video-group h3 {
	margin: 0 0 10px;
	font-size: 1.125rem;
}

.riyadh-video .riyadh-video-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.riyadh-video .riyadh-video-instagram {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.riyadh-video-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.riyadh-video-cover {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	background: var(--riyadh-teal);
}

.riyadh-video-instagram .riyadh-video-cover {
	aspect-ratio: 9 / 16;
}

.riyadh-video-cover img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.riyadh-video-play {
	z-index: 1;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #101e1cbb;
	color: #fff;
}

.riyadh-video-youtube .riyadh-video-play {
	width: 50px;
	height: 34px;
	border-radius: 8px;
	background: #c50000;
}

.riyadh-video-caption {
	display: block;
	margin-top: 6px;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.riyadh-video-card:focus-visible {
	outline: 2px solid var(--riyadh-teal);
	outline-offset: -2px;
}

@media (max-width: 680px) {
	.riyadh-video-groups {
		grid-template-columns: minmax(0, 1fr);
	}

	.riyadh-video .riyadh-video-list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 86%;
		overflow-x: auto;
		padding-bottom: 8px;
		scroll-snap-type: x mandatory;
	}

	.riyadh-video .riyadh-video-instagram {
		grid-auto-columns: 41%;
	}

	.riyadh-video-list > li {
		scroll-snap-align: start;
	}
}