@charset "utf-8";

/* ANGLEBOXIMAGE */
	:root {
		--mywp-abi-gap: 6rem;
	}
	.angleboximage {
		display: grid;
		grid-template-rows: min-content var(--mywp-abi-gap) min-content;
		position: relative;
		z-index: 15;
		}
	.angleboximage-image {
		grid-area: 1 / 1 / span 2 / span 1;
		}
	.angleboximage-content {
		display: grid;
		grid-area: 2 / 1 / span 2 / span 1;
		position: relative;
		z-index: 2;
		}
	@media (max-width: 59.99em) {
		.angleboximage-right > .angleboximage-content::before {
			clip-path: polygon(
				0% 0%,
				calc(100% - (var(--mywp-abi-gap) * 1.5)) 0%,
				100% var(--mywp-abi-gap),
				100% 100%,
				0% 100%
				);
			}
		.angleboximage-left > .angleboximage-content::before {
			clip-path: polygon(
				calc(var(--mywp-abi-gap) * 1.5) 0%,
				100% 0%,
				100% 100%,
				0% 100%,
				0% var(--mywp-abi-gap)
				);
			}
	}
	.angleboximage-holder {
		margin: var(--mywp-mg-normal);
		position: relative;
		z-index: 10;
		}
	@media (min-width: 60em) {
		:root {
			--mywp-abi-gap: 4.8rem;
		}
		.angleboximage {
			grid-template-columns: 1fr var(--mywp-abi-gap) var(--mywp-abi-gap) 1fr;
			grid-template-rows: 1fr;
			margin: calc(var(--mywp-abi-gap) * -1) 0;
			}
		.angleboximage-left > .angleboximage-image {
			grid-area: 1 / 1 / auto / span 3;
			}
		.angleboximage-left > .angleboximage-content {
			grid-area: 1 / 3 / auto / span 2;
			}
		.angleboximage-right > .angleboximage-content {
			grid-area: 1 / 1 / auto / span 2;
			}
		.angleboximage-right > .angleboximage-image {
			grid-area: 1 / 2 / auto / span 3;
			}
		.angleboximage-image {
			margin: var(--mywp-abi-gap) 0;
			}
		.angleboximage-image::after {
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
			height: 100%;
			pointer-events: none;
			position: absolute;
			top: 0;
			width: calc(50% + 0.1rem);
			z-index: 1;
			}
		.angleboximage-right > .angleboximage-image::after {
			background-position: left center;
			right: 0;
			}
		.angleboximage-right > .angleboximage-image.angleboximage-white::after {
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 1000'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23ffffff;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='b' points='0 1000 330 500 0 0 0 1000'/%3E%3C/svg%3E");
			}
		.angleboximage-right > .angleboximage-image.angleboximage-highlight::after {
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 1000'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23887755;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='b' points='0 1000 330 500 0 0 0 1000'/%3E%3C/svg%3E");
			}
		.angleboximage-right > .angleboximage-image.angleboximage-color::after {
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 1000'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%233f3431;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='b' points='0 1000 330 500 0 0 0 1000'/%3E%3C/svg%3E");
			}
		.angleboximage-left > .angleboximage-image::after {
			background-position: right center;
			left: 0;
			}
		.angleboximage-left > .angleboximage-image.angleboximage-white::after {
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 1000'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23ffffff;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='b' points='330 0 0 500 330 1000 330 0'/%3E%3C/svg%3E");
			}
		.angleboximage-left > .angleboximage-image.angleboximage-highlight::after {
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 1000'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23887755;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='b' points='330 0 0 500 330 1000 330 0'/%3E%3C/svg%3E");
			}
		.angleboximage-left > .angleboximage-image.angleboximage-color::after {
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 1000'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%233f3431;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='b' points='330 0 0 500 330 1000 330 0'/%3E%3C/svg%3E");
			}
		.angleboximage-img {
			aspect-ratio: 5 / 3;
			height: 100%;
			object-fit: cover;
			}
		.angleboximage-content {
			align-items: center;
			}
		.angleboximage-holder {
			margin: var(--mywp-mg-normal) 0;
			max-width: 64rem;
			}
		.angleboximage-right .angleboximage-content {
			justify-items: flex-end;
			}
		.angleboximage-right .angleboximage-content {
			padding-left: var(--mywp-mg-normal);
			}
		.angleboximage-left .angleboximage-content {
			padding-right: var(--mywp-mg-normal);
			}
	}