.site-ux-image-overlay {
	--site-ux-current-ratio: var(--site-ux-ratio, 1 / 2);
	--site-ux-current-aspect-ratio: var(--site-ux-aspect-ratio, var(--site-ux-current-ratio));
	--site-ux-current-height: var(--site-ux-height, auto);
	--site-ux-current-flex: var(--site-ux-flex, 0 1 auto);
	--site-ux-current-image-x: var(--site-ux-image-x, 50%);
	--site-ux-current-image-y: var(--site-ux-image-y, 0%);
	--site-ux-current-padding: var(--site-ux-padding, 24px);
	--site-ux-current-overlay: var(--site-ux-overlay, 0.35);
	--site-ux-current-align: var(--site-ux-align, left);
	--site-ux-current-text-size: var(--site-ux-text-size, revert);
	--site-ux-current-text-top: var(--site-ux-text-top, auto);
	--site-ux-current-text-bottom: var(--site-ux-text-bottom, 0);
	position: relative;
	isolation: isolate;
	width: 100%;
	aspect-ratio: var(--site-ux-current-aspect-ratio);
	block-size: var(--site-ux-current-height);
	flex: var(--site-ux-current-flex);
	overflow: hidden;
	background: #37434a;
	color: #fff;
	text-align: var(--site-ux-current-align);
}

/* Match Flatsome's desktop (850+), tablet (550-849), and mobile (<550) widths. */
@media (max-width: 849px) {
	.site-ux-image-overlay {
		--site-ux-current-ratio: var(--site-ux-ratio-md);
		--site-ux-current-aspect-ratio: var(--site-ux-aspect-ratio-md);
		--site-ux-current-height: var(--site-ux-height-md);
		--site-ux-current-flex: var(--site-ux-flex-md);
		--site-ux-current-image-x: var(--site-ux-image-x-md);
		--site-ux-current-image-y: var(--site-ux-image-y-md);
		--site-ux-current-padding: var(--site-ux-padding-md);
		--site-ux-current-overlay: var(--site-ux-overlay-md);
		--site-ux-current-align: var(--site-ux-align-md);
		--site-ux-current-text-size: var(--site-ux-text-size-md);
		--site-ux-current-text-top: var(--site-ux-text-top-md);
		--site-ux-current-text-bottom: var(--site-ux-text-bottom-md);
	}
}

@media (max-width: 549px) {
	.site-ux-image-overlay {
		--site-ux-current-ratio: var(--site-ux-ratio-sm);
		--site-ux-current-aspect-ratio: var(--site-ux-aspect-ratio-sm);
		--site-ux-current-height: var(--site-ux-height-sm);
		--site-ux-current-flex: var(--site-ux-flex-sm);
		--site-ux-current-image-x: var(--site-ux-image-x-sm);
		--site-ux-current-image-y: var(--site-ux-image-y-sm);
		--site-ux-current-padding: var(--site-ux-padding-sm);
		--site-ux-current-overlay: var(--site-ux-overlay-sm);
		--site-ux-current-align: var(--site-ux-align-sm);
		--site-ux-current-text-size: var(--site-ux-text-size-sm);
		--site-ux-current-text-top: var(--site-ux-text-top-sm);
		--site-ux-current-text-bottom: var(--site-ux-text-bottom-sm);
	}
}

.site-ux-image-overlay > .site-ux-image-overlay__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--site-ux-current-image-x) var(--site-ux-current-image-y);
}

.site-ux-image-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--site-ux-current-overlay);
	pointer-events: none;
}

.site-ux-image-overlay__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: min(var(--site-ux-current-padding), 10%);
	overflow: auto;
}

.site-ux-image-overlay__text {
	flex-shrink: 0;
	width: 100%;
	overflow-wrap: anywhere;
	/* Auto margins align short text without hiding the start of overflowing text. */
	margin-top: var(--site-ux-current-text-top);
	margin-bottom: var(--site-ux-current-text-bottom);
}

.site-ux-image-overlay .site-ux-image-overlay__text :is(h1, h2, h3, h4, h5, h6, p, a) {
	color: inherit;
}

.site-ux-image-overlay__text > :is(h1, h2, h3, h4, h5, h6, p) {
	font-size: var(--site-ux-current-text-size);
}

.site-ux-image-overlay__text > :last-child {
	margin-bottom: 0;
}

.site-ux-image-overlay__text a:hover {
	text-decoration: underline;
}

.site-ux-image-overlay__text a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}