/* Media embed looks: Framed (tinted frame + caption), Rounded, Caption dot (framed, gold dot caption). */
:is(.hmf-embed--framed, .hmf-embed--caption-dot) .hmf-embed {
	padding: 8px;
	border: 1px solid #e3ebf3;
	border-radius: 28px;
	background: var(--hc-sky);
	box-shadow: var(--hc-shadow-panel);
}

:is(.hmf-embed--framed, .hmf-embed--caption-dot) .hmf-embed__frame {
	border-radius: 20px;
	background: var(--hc-ink);
}

:is(.hmf-embed--framed, .hmf-embed--caption-dot) .hmf-embed__caption {
	padding: 14px 12px 8px;
	color: var(--hc-slate);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.9;
}

.hmf-embed--caption-dot .hmf-embed__caption {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 6px;
	color: var(--hc-ink);
	font-weight: 800;
}

.hmf-embed--caption-dot .hmf-embed__caption::before {
	content: "";
	flex-shrink: 0;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--hc-gold);
	box-shadow: 0 0 0 4px rgb(255 178 56 / 0.25);
}

.hmf-embed--rounded {
	inline-size: 100%;
}

.hmf-embed--rounded .hmf-embed {
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
}

.hmf-embed--rounded .hmf-embed__frame {
	inline-size: 100%;
}

@media (width >= 68.75rem) {

	:is(.hmf-embed--framed, .hmf-embed--caption-dot) .hmf-embed {
		border-radius: 32px;
	}

	:is(.hmf-embed--framed, .hmf-embed--caption-dot) .hmf-embed__frame {
		border-radius: 24px;
	}
}