.featured-image-with-tab-overlay {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 3rem),
		calc(100vw - calc(calc(100vw - var(--wp--style--global--content-size)) / 2)) calc(100% - 3rem),
		calc(calc(100vw - calc(calc(100vw - var(--wp--style--global--content-size)) / 2)) - calc(3rem * var(--wp--custom--loras--angle-pct))) 100%,
		0 100%
	);
	min-height: 31.25vh;
	position: relative;
}

	.featured-image-with-tab-overlay > figure { z-index: 1; }

	.featured-image-with-tab-overlay > .featured-image-tab-overlay {
		background: var(--wp--preset--color--translucent-white);
		max-width: 100%;
		padding: var(--wp--preset--spacing--60) calc(calc(calc(100vw - 15px) - var(--wp--style--global--content-size)) / 2); /* 15px = width of scrollbar */
		position: absolute; top: auto; right: 0; bottom: 0; left: 0;
		z-index: 2;
	}

.is-style-tab-left,
.is-style-tab-right,
.is-style-tab-wide-left,
.is-style-tab-wide-right
{
	padding-bottom: calc(var(--wp--style--block-gap) * 2); 
	position: relative;
	z-index: 2;
}

.is-style-tab-left {
	clip-path: polygon(0% 0%, 50% 0%, calc(50% + calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 100% 3rem, 100% 100%, 0 100%);
}
.is-style-tab-right {
	clip-path: polygon(0% 3rem, calc(50% - calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 50% 0%, 100% 0, 100% 100%, 0 100%);
}
.is-style-tab-wide-left {
	clip-path: polygon(0% 0%, 62.5% 0%, calc(62.5% + calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 100% 3rem, 100% 100%, 0 100%);
}
.is-style-tab-wide-right {
	clip-path: polygon(0% 3rem, calc(37.5% - calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 37.5% 0%, 100% 0, 100% 100%, 0 100%);
}

.is-style-tab-left:not(:first-child),
.is-style-tab-right:not(:first-child),
.is-style-tab-wide-left:not(:first-child),
.is-style-tab-wide-right:not(:first-child)
{
	margin-top: -3rem !important;
}

*:has(+ .is-style-tab-left),
*:has(+ .is-style-tab-right),
*:has(+ .is-style-tab-wide-left),
*:has(+ .is-style-tab-wide-right)
{
	/* @todo This doesn't work in Firefox! Find an alternative */
	padding-bottom: calc(calc(var(--wp--style--block-gap) * 2) + 3rem) !important; 
}

@media screen and (max-width: 1024px) {

	.featured-image-with-tab-overlay { min-height: auto; }

	.featured-image-with-tab-overlay figure {
		clip-path: polygon(
			0 0,
			100% 0,
			100% calc(100% - 2rem),
			75vw calc(100% - 2rem),
			calc(75vw - calc(2rem * var(--wp--custom--loras--angle-pct))) 100%,
			0 100%
		);
	}

	.featured-image-with-tab-overlay > .featured-image-tab-overlay {
		padding: 0 var(--wp--style--block-gap);
		position: relative;
		z-index: 2;
	}

	.is-style-tab-left {
		clip-path: polygon(0% 0%, 70% 0%, calc(70% + calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 100% 3rem, 100% 100%, 0 100%);
	}
	.is-style-tab-right {
		clip-path: polygon(0% 3rem, calc(30% - calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 30% 0%, 100% 0, 100% 100%, 0 100%);
	}
	.is-style-tab-wide-left {
		clip-path: polygon(0% 0%, 85% 0%, calc(85% + calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 100% 3rem, 100% 100%, 0 100%);
	}
	.is-style-tab-wide-right {
		clip-path: polygon(0% 3rem, calc(15% - calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 15% 0%, 100% 0, 100% 100%, 0 100%);
	}

}

@media screen and (max-width: 782px) {

	.is-style-tab-left, .is-style-tab-wide-left {
		clip-path: polygon(0% 0%, 85% 0%, calc(85% + calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 100% 3rem, 100% 100%, 0 100%);
	}
	.is-style-tab-right, .is-style-tab-wide-right {
		clip-path: polygon(0% 3rem, calc(15% - calc(3rem * var(--wp--custom--loras--angle-pct))) 3rem, 15% 0%, 100% 0, 100% 100%, 0 100%);
	}

}
