/**
 * Home-page video banners.
 *
 * Visual values reuse the Kadence palette. Layout values cover behavior that
 * the native Video block cannot express consistently across breakpoints.
 */

.ob-video-banners-section .kt-row-column-wrap {
	align-items: stretch;
}

.ob-video-banners-section .wp-block-kadence-column,
.ob-video-banners-section .kt-inside-inner-col,
.ob-video-banner-card,
.ob-video-banner-card > .wp-block-group__inner-container {
	height: 100%;
}

.ob-video-banner-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
}

.ob-video-banner-card .home-video-banner {
	margin: 0 0 16px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--global-palette7, #d7e0e8) 82%, transparent);
	border-radius: 14px;
	background: var(--global-palette8, #f2f6f8);
}

.ob-video-banner-card .home-video-banner video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 97 / 60;
	object-fit: contain;
}

.ob-video-banner-card .wp-block-heading {
	margin-top: auto !important;
}

@media (max-width: 767px) {
	.ob-video-banner-card .home-video-banner {
		margin-bottom: 14px;
		border-radius: 12px;
	}
}