.section[data-bg-img="true"] {
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center;
	content-visibility: auto; 
}

/* Remove or rename this class to use component name acronym */
.cp-flex {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

{# Inline video with decorations #}
.cp-video-container {
	width: 100%;
	padding: 14.45px 9.25px;
	position: relative;
}

.cp-vid-decor:before,
.cp-vid-decor:after {
	width: 12.045px;
	height: 11.92px;
	position: absolute;
	content: '';
	background-image: url('https://www.varonis.com/hubfs/2024%20Website%20Redesign/Decorations/green-corner-vid-decor.svg');
	background-size: cover;
	background-repeat: no-repeat;
}

.cp-vid-decor.top:before {
	inset: 0;
}

.cp-vid-decor.top:after {
	inset: 0 0 auto auto;
	transform: rotate(90deg);
}

.cp-vid-decor.bot:before {
	inset: auto auto 0 0;
	transform: rotate(-90deg);
}

.cp-vid-decor.bot:after {
	inset: auto 0 0 auto;
	transform: rotate(180deg);
}


@media screen and (min-width: 768px) {
	.cp-video-container {
		padding: 40px;
	}
	.cp-vid-decor:before,
	.cp-vid-decor:after {
		width: 20.833px;
		height: 20.617px;
	}

	.cp-vid-decor.top:before {
		inset: 16.13px auto auto 11px;
	}

	.cp-vid-decor.top:after {
		inset: 16.13px 11px auto auto;
	}

	.cp-vid-decor.bot:before {
		inset: auto auto 11px 16.13px;
	}

	.cp-vid-decor.bot:after {
		inset: auto 11px 16.13px auto;
	}
}

@media screen and (min-width: 1200px) {
	.cp-video-container {
		padding: 40px;
	}
	.cp-vid-decor.top:before {
		inset: 0;
	}

	.cp-vid-decor.top:after {
		inset: 0 0 auto auto;
	}

	.cp-vid-decor.bot:before {
		inset: auto auto 0 0;
	}

	.cp-vid-decor.bot:after {
		inset: auto 0 0 auto;
	}
}