.wp-block-video,
.wp-block-embed {
	margin-block: 0;
}

.wp-block-video video,
.wp-block-embed iframe,
.wp-block-embed .wp-block-embed__wrapper {
	display: block;
	width: 100%;
	border-radius: calc(20px * var(--kbd-scale, 1));
	overflow: clip;
}

/* Safari draws a playing iframe video on its own layer, which ignores
   border-radius and overflow, so the corners show square. clip-path holds. */
.wp-block-embed .wp-block-embed__wrapper {
	clip-path: inset(0 round calc(20px * var(--kbd-scale, 1)));
}

.wp-block-video figcaption,
.wp-block-embed figcaption {
	margin-top: var(--wp--preset--spacing--20, 16px);
	margin-bottom: 0;
	color: var(--wp--preset--color--contrast-2, #717d81);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: var(--wp--custom--letter-spacing--body, 0.01em);
	line-height: var(--wp--custom--line-height--body, 1.35);
	text-align: left;
	text-transform: none;
}

/* Vimeo embeds take the video's real ratio (set in vimeo-background-mode.php)
   instead of the block's rounded aspect preset. */
.wp-block-embed .wp-block-embed__wrapper[style*='--kbd-video-ar'] {
	position: relative;
	aspect-ratio: var(--kbd-video-ar);
}

.wp-block-embed .wp-block-embed__wrapper[style*='--kbd-video-ar']::before {
	content: none;
}

.wp-block-embed .wp-block-embed__wrapper[style*='--kbd-video-ar'] > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}