/* 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-80);
	--text-width: 50%;
	--image-width: calc(100% - var(--text-width));

	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;
}

.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));
}

.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;
}

.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));
}

.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-default .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;
}