.site-ux-link-callout {
	--site-ux-callout-current-background: var(--site-ux-callout-background, #adb690);
	--site-ux-callout-current-hover-background: var(--site-ux-callout-hover-background, #6c734e);
	--site-ux-callout-current-text-color: var(--site-ux-callout-text-color, #000);
	--site-ux-callout-current-hover-text-color: var(--site-ux-callout-hover-text-color, #fff);
	--site-ux-callout-current-layout: var(--site-ux-callout-layout, row);
	--site-ux-callout-current-content-align: var(--site-ux-callout-content-align, space-between);
	--site-ux-callout-current-gap: var(--site-ux-callout-gap, 8px);
	--site-ux-callout-current-image-width: var(--site-ux-callout-image-width, 170px);
	--site-ux-callout-current-padding: var(--site-ux-callout-padding, 39px 25px 39px 64px);
	--site-ux-callout-current-min-height: var(--site-ux-callout-min-height, 0px);
	--site-ux-callout-current-max-height: var(--site-ux-callout-max-height, none);
	--site-ux-callout-current-flex: var(--site-ux-callout-flex, 0 1 auto);
	display: flex;
	align-items: center;
	justify-content: var(--site-ux-callout-current-content-align);
	gap: var(--site-ux-callout-current-gap);
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: var(--site-ux-callout-current-min-height);
	max-block-size: var(--site-ux-callout-current-max-height);
	flex: var(--site-ux-callout-current-flex);
	padding: var(--site-ux-callout-current-padding);
	background-color: var(--site-ux-callout-current-background);
	color: var(--site-ux-callout-current-text-color);
	flex-direction: var(--site-ux-callout-current-layout);
	text-decoration: none;
	transition: background-color 0.2s ease-in, color 0.2s ease-in;
}

.site-ux-link-callout:hover,
.site-ux-link-callout:focus-visible {
	background-color: var(--site-ux-callout-current-hover-background);
	color: var(--site-ux-callout-current-hover-text-color);
}

.site-ux-link-callout__text {
	font-size: 2rem;
	overflow-wrap: anywhere;
}

.site-ux-link-callout__image-wrap {
	display: flex;
	flex: 0 1 var(--site-ux-callout-current-image-width);
	justify-content: center;
	max-inline-size: var(--site-ux-callout-current-image-width);
}

.site-ux-link-callout__image {
	display: block;
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
}

/* Match Flatsome's desktop (850+), tablet (550-849), and mobile (<550) widths. */
@media (max-width: 849px) {
	.site-ux-link-callout {
		--site-ux-callout-current-background: var(--site-ux-callout-background-md);
		--site-ux-callout-current-hover-background: var(--site-ux-callout-hover-background-md);
		--site-ux-callout-current-text-color: var(--site-ux-callout-text-color-md);
		--site-ux-callout-current-hover-text-color: var(--site-ux-callout-hover-text-color-md);
		--site-ux-callout-current-layout: var(--site-ux-callout-layout-md);
		--site-ux-callout-current-content-align: var(--site-ux-callout-content-align-md);
		--site-ux-callout-current-gap: var(--site-ux-callout-gap-md);
		--site-ux-callout-current-image-width: var(--site-ux-callout-image-width-md);
		--site-ux-callout-current-padding: var(--site-ux-callout-padding-md);
		--site-ux-callout-current-min-height: var(--site-ux-callout-min-height-md);
		--site-ux-callout-current-max-height: var(--site-ux-callout-max-height-md);
		--site-ux-callout-current-flex: var(--site-ux-callout-flex-md);
	}
}

@media (max-width: 549px) {
	.site-ux-link-callout {
		--site-ux-callout-current-background: var(--site-ux-callout-background-sm);
		--site-ux-callout-current-hover-background: var(--site-ux-callout-hover-background-sm);
		--site-ux-callout-current-text-color: var(--site-ux-callout-text-color-sm);
		--site-ux-callout-current-hover-text-color: var(--site-ux-callout-hover-text-color-sm);
		--site-ux-callout-current-layout: var(--site-ux-callout-layout-sm);
		--site-ux-callout-current-content-align: var(--site-ux-callout-content-align-sm);
		--site-ux-callout-current-gap: var(--site-ux-callout-gap-sm);
		--site-ux-callout-current-image-width: var(--site-ux-callout-image-width-sm);
		--site-ux-callout-current-padding: var(--site-ux-callout-padding-sm);
		--site-ux-callout-current-min-height: var(--site-ux-callout-min-height-sm);
		--site-ux-callout-current-max-height: var(--site-ux-callout-max-height-sm);
		--site-ux-callout-current-flex: var(--site-ux-callout-flex-sm);
	}

	.site-ux-link-callout__text {
		font-size: 1.25rem;
	}
}