/* Text and Image Section */

.wpfox-text-image-section {
	--section-spacing-default: max(40px, var(--spacing-90));
	--text-spacing-top-scalar: 1;
	--text-spacing-bottom-scalar: 1;
	--image-spacing-top-scalar: 1;
	--image-spacing-bottom-scalar: 1;
	--image-spacing-side-scalar: 0;
	--text-spacing-top: calc(var(--section-spacing-default) * var(--text-spacing-top-scalar));
	--text-spacing-bottom: calc(var(--section-spacing-default) * var(--text-spacing-bottom-scalar));
	--image-spacing-top: calc(var(--section-spacing-default) * var(--image-spacing-top-scalar));
	--image-spacing-bottom: calc(var(--section-spacing-default) * var(--image-spacing-bottom-scalar));
	--image-spacing-side: calc(var(--section-spacing-default) * var(--image-spacing-side-scalar));
	--image-fixed-height: 400;
	--gap-width: var(--spacing-95);
	--text-width: 50%;
	--image-width: calc(100% - var(--text-width));
	--text-content-max-width: 1200;

	background-color: var(--wp--preset--color--light-grey);
	max-width: var(--wp--custom--content-size);
	margin-left: auto;
	margin-right: auto;
}

.wpfox-text-image-section>.wrapper {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	background-color: inherit;
	background-image: inherit;
}

.wpfox-text-image-section .row {
	gap: var(--gap-width);
	flex-wrap: nowrap;
	overflow-y: hidden;
}

.wpfox-text-image-section .col-text {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	justify-content: center;
	padding-top: var(--text-spacing-top);
	padding-bottom: var(--text-spacing-bottom);
	flex-basis: calc(var(--text-width) - 0.5 * var(--gap-width));
	min-height: calc(385rem / var(--base-size));
}

.wpfox-text-image-section.text-position-top .col-text {
	justify-content: flex-start;
}

.wpfox-text-image-section.text-position-bottom .col-text {
	justify-content: flex-end;
}

.wpfox-text-image-section .row.image-left .col-text {
	order: 2;
}

.wpfox-text-image-section .col-text>.wrapper {
	position: relative;
	z-index: 1;
}

.wpfox-text-image-section.text-content-width-custom .col-text > .wrapper {
	max-width: max(calc(1px * var(--text-content-max-width)),calc(var(--text-content-max-width) * 1rem / var(--base-size)));
}

.wpfox-text-image-section h1 {}

.wpfox-text-image-section .col-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: var(--image-spacing-top);
	padding-bottom: var(--image-spacing-bottom);
	flex-basis: calc(var(--image-width) - 0.5 * var(--gap-width));
	/*min-height: calc(0.8vw * 100 * 385 / 1366);*/
}

.wpfox-text-image-section.image-position-top .col-image {
	justify-content: flex-start;
}

.wpfox-text-image-section.image-position-bottom .col-image {
	justify-content: flex-end;
}

.wpfox-text-image-section.image-alignment-inside .col-image,
.wpfox-text-image-section.image-alignment-outside .image-right .col-image {
	align-items: flex-end;
}

.wpfox-text-image-section.image-alignment-outside .col-image,
.wpfox-text-image-section.image-alignment-inside .image-right .col-image {
	align-items: flex-start;
}

.wpfox-text-image-section .col-image>a {
	display: inline-block;
	width: 100%;
	height: auto;
}

.wpfox-text-image-section.image-size-section_height .col-image>a {
	height: 100%;
}

.wpfox-text-image-section.image-size-basic .col-image > a {
	width: auto;
}

.wpfox-text-image-section .col-image .wrapper {
	position: relative;
}

.wpfox-text-image-section .col-image img {
	display: block;
	width: auto;
	max-height: max(300px, calc(500rem/var(--base-size)));
}


/* Text and Image Section - Image Size Column Width */

.wpfox-text-image-section.image-size-column_width {}

.wpfox-text-image-section.image-size-column_width .col-image .wrapper {
	width: 100%;
}

.wpfox-text-image-section.image-size-column_width .col-image img {
	width: 100%;
	height: auto;
	max-height: none;
}


/* Text and Image Section - Image Size Fixed Height */

.wpfox-text-image-section.image-size-fixed_height {}

.wpfox-text-image-section.image-size-fixed_height .col-image .wrapper {
	height: calc(1rem * var(--image-fixed-height)/var(--base-size));
	width: 100%;
}

.wpfox-text-image-section.image-size-fixed_height .col-image img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: calc(1rem * var(--image-fixed-height)/var(--base-size));
	max-height: none;
	max-width: none;
}

.wpfox-text-image-section.image-size-fixed_height.image-alignment-outside .col-image img,
.wpfox-text-image-section.image-size-fixed_height.image-alignment-inside .image-right .col-image img {
	left: var(--image-spacing-side);
	transform: none;
}

.wpfox-text-image-section.image-size-fixed_height.image-alignment-inside .col-image img,
.wpfox-text-image-section.image-size-fixed_height.image-alignment-outside .image-right .col-image img {
	left: auto;
	right: var(--image-spacing-side);
	transform: none;
}


/* Text and Image Section - Image Size Relative to Section Height */

.wpfox-text-image-section.image-size-section_height {}

.wpfox-text-image-section.image-size-section_height .col-image .wrapper {
	height: 100%;
	width: 100%;
}

.wpfox-text-image-section.image-size-section_height .col-image img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: 100%;
	max-height: none;
	max-width: none;
}

.wpfox-text-image-section.image-size-section_height.image-alignment-outside .col-image img,
.wpfox-text-image-section.image-size-section_height.image-alignment-inside .image-right .col-image img {
	left: var(--image-spacing-side);
	transform: none;
}

.wpfox-text-image-section.image-size-section_height.image-alignment-inside .col-image img,
.wpfox-text-image-section.image-size-section_height.image-alignment-outside .image-right .col-image img {
	left: auto;
	right: var(--image-spacing-side);
	transform: none;
}




.wpfox-text-image-section.image-size-full-height > .wrapper {
	position: relative;
}

.wpfox-text-image-section.image-size-full-height .row {
	background-color: inherit;
}

.wpfox-text-image-section.image-size-full-height .col-text {
	background-color: inherit;
	position: relative;
	z-index: 1;
}

.wpfox-text-image-section.image-size-full-height .col-text::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	background-color: inherit;
	height: calc(100% + 0.5px);
	width: var(--gap-width);
	transform: translateX(98%);
	clip-path: ellipse(300% max(120%, 600px) at -200% 50%);
}
.wpfox-text-image-section.image-size-full-height .image-left .col-text::after {
    left: 0;
    right: auto;
    transform: translateX(-99%);
    clip-path: ellipse(300% max(120%, 600px) at 300% 50%);
}

.wpfox-text-image-section.image-size-full-height .col-image .wrapper {
	position: absolute;
	top: 0;
	right: 0;
	width: 50vw !important;
	height: 100%;
}
.wpfox-text-image-section.image-size-full-height .image-left .col-image .wrapper {
	left: 0;
	right: auto;
}
.wpfox-text-image-section.image-size-full-height .col-image .wrapper img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}



@media (max-width: 39.999em) {
	.wpfox-text-image-section .row {
		flex-wrap: wrap;
		overflow: visible;
	}
	
	.wpfox-text-image-section .row > * {
		min-width: 100%;
	}
	
	.wpfox-text-image-section.image-size-full-height .image-right .col-text {
		padding-bottom: 0;
	}
	
	.wpfox-text-image-section.image-size-full-height .image-left .col-text {
		padding-top: 0;
	}
	
	.wpfox-text-image-section.image-size-full-height .col-text::after {
		transform: rotate(90deg) translate(calc(var(--gap-width) * 0.5),50%);
		transform-origin: bottom left;
		top: auto;
		bottom: 0;
		right: auto;
		left: 50%;
		height: 100vw;
	}
	
	.wpfox-text-image-section.image-size-full-height .image-left .col-text::after {
		transform: rotate(90deg) translate(calc(var(--gap-width) * -0.5),-50%);
		transform-origin: top left;
		top: calc(-1 * var(--gap-width));
		bottom: auto;
		right: auto;
		left: 50%;
		height: 100vw;
	}
	
	.wpfox-text-image-section.image-size-full-height .col-image {
		padding: 0;
	}
	
	.wpfox-text-image-section.image-size-full-height .col-image .wrapper {
		position: relative;
		width: auto !important;
		margin: 0 calc(50% - 50vw);
	}
}