.hmf-media-carousel .hmf-media-carousel__track {
	--hc-f: 20px;
	grid-auto-columns: 78%;
	gap: 14px;
	padding: 6px 20px 36px;
	scroll-padding-inline: 20px;
	mask-image: linear-gradient(90deg, transparent, #000 var(--hc-f), #000 calc(100% - var(--hc-f)), transparent);
}

.hmf-media-carousel .hmf-media-carousel__slide .hmf-embed {
	border-radius: 20px;
	background: linear-gradient(135deg, var(--hc-ink), #1a1c33 60%, var(--hc-blue-deep));
	box-shadow: 0 30px 60px -40px rgb(15 16 29 / 0.45);
}

.hmf-media-carousel .hmf-media-carousel__duration {
	inset-block-end: 10px;
	inset-inline-start: 12px;
	padding: 0 10px;
	background: rgb(15 16 29 / 0.72);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.9;
}

.hmf-media-carousel .hmf-media-carousel__nav {
	gap: 12px;
	margin-block-start: -12px;
}

.hmf-media-carousel .hmf-media-carousel__btn {
	inline-size: 48px;
	block-size: 48px;
	border-color: #dbe5ef;
	color: var(--hc-ink);
	box-shadow: 0 20px 40px -30px rgb(15 16 29 / 0.5);
	transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.hmf-media-carousel .hmf-media-carousel__btn:hover:not(:disabled) {
	border-color: var(--hc-gold);
	background: var(--hc-gold);
	color: var(--hc-ink-2);
}

@media (width >= 48rem) {

	.hmf-media-carousel .hmf-media-carousel__track {
		--hc-f: 56px;
		grid-auto-columns: calc((100% - 112px - 40px) / 2.25);
		gap: 20px;
		padding: 6px 56px 44px;
		scroll-padding-inline: 56px;
	}
}

@media (width >= 64rem) {

	.hmf-media-carousel .hmf-media-carousel__track {
		--hc-f: 80px;
		grid-auto-columns: calc((100% - 160px - 48px) / 2.25);
		gap: 24px;
		padding: 6px 80px 48px;
		scroll-padding-inline: 80px;
	}

	.hmf-media-carousel .hmf-media-carousel__slide .hmf-embed {
		border-radius: 24px;
	}
}
/* Gallery: wide photo slides, swipe only on phones. */
.hmf-carousel--gallery .hmf-media-carousel__track {
	grid-auto-columns: 88%;
	padding: 6px 20px 28px;
}

.hmf-carousel--gallery .hmf-media-carousel__slide img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 24px 40px -28px rgb(15 16 29 / 0.6);
}

.hmf-carousel--gallery .hmf-media-carousel__nav {
	margin-block-start: 0;
}

/* Three-up: one slide on phones, two on tablets, three on desktops. */
.hmf-carousel--three-up .hmf-media-carousel__track {
	--hc-f: 20px;
	grid-auto-columns: 86%;
	gap: 16px;
	padding: 6px var(--hc-f) 28px;
	scroll-padding-inline: var(--hc-f);
}

@media (width < 48rem) {

	.hmf-carousel--gallery .hmf-media-carousel__nav {
		display: none;
	}
}

@media (width >= 48rem) {

	.hmf-carousel--gallery .hmf-media-carousel__track {
		grid-auto-columns: calc((100% - 112px - 20px) / 1.6);
		padding: 6px 56px 32px;
	}

	.hmf-carousel--three-up .hmf-media-carousel__track {
		--hc-f: 32px;
		grid-auto-columns: calc((100% - 16px) / 2);
	}
}

@media (width >= 64rem) {

	.hmf-carousel--three-up .hmf-media-carousel__track {
		grid-auto-columns: calc((100% - 32px) / 3);
	}
}

@media (width >= 68.75rem) {

	.hmf-carousel--gallery .hmf-media-carousel__track {
		grid-auto-columns: calc((100% - 160px - 24px) / 2.2);
		padding: 6px 80px 36px;
	}

	.hmf-carousel--gallery .hmf-media-carousel__slide img {
		border-radius: 26px;
	}
}

/* Proposed: single, one full-width video per view with a hairline frame. */
.hmf-carousel--single .hmf-media-carousel__track {
	grid-auto-columns: 100%;
	gap: 16px;
	padding: 0;
	scroll-padding-inline: 0;
	mask-image: none;
}

.hmf-carousel--single .hmf-media-carousel__slide .hmf-embed {
	border: 1px solid #dbe5ef;
	border-radius: 24px;
	box-shadow: 0 24px 48px -36px rgb(15 16 29 / 0.35);
}