.CTA {
	background: var(--white);
	overflow: hidden;
	margin-bottom: -1px;
}

.CTA .b-frame {
	padding-top: 60rem;
	padding-bottom: 60rem;
}

.CTA .b-frame::before,
.CTA .b-frame::after {
	content: "";
	display: block;
	overflow: hidden;
}

.CTA .content {
	position: relative;
}

.CTA .content p {
	max-width: 760rem;
}

.CTA .b-button:not(.alt-outline) {background: var(--orange);}
.CTA .b-button:hover {background: var(--black) !important; color: var(--white) !important;}

.CTA .image {
	margin: -60rem 0;
	position: relative;
}

.CTA .image .mask {
	clip-path: polygon(28.5% 0%, 71.5% 0%, 100% 100%, 0% 100%);
}

.CTA .image::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 22rem;
	width: 60rem;
	height: 100%;
	background: var(--orange);
	transform: skewX(-21deg);
	z-index: 1;
}

.CTA .image::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 22rem;
	width: 60rem;
	height: 100%;
	background: var(--orange);
	transform: skewX(21deg);
	z-index: 1;
}



/* accent */

.CTA[data-accent="orange"] .b-button:not(.alt-outline) {background: var(--orange); color: var(--black);}
.CTA[data-accent="orange"] .image::before {background: var(--orange);}
.CTA[data-accent="orange"] .image::after {background: var(--orange);}

.CTA[data-accent="green"] .b-button:not(.alt-outline) {background: var(--green); color: var(--black);}
.CTA[data-accent="green"] .image::before {background: var(--green);}
.CTA[data-accent="green"] .image::after {background: var(--green);}

.CTA[data-accent="blue"] .b-button:not(.alt-outline) {background: var(--blue); color: var(--white);}
.CTA[data-accent="blue"] .image::before {background: var(--blue);}
.CTA[data-accent="blue"] .image::after {background: var(--blue);}



@media screen and (max-width: 960px) {
	.CTA .b-column:nth-child(2) {display: none;}
}



/* ANIMATION */

@media screen and (min-width: 961px) {
	.CTA[data-visible] .image .mask {transition: opacity 0.6s; transition-delay: 0.2s;}
	.CTA[data-visible="false"] .image .mask {opacity: 0;}
	.CTA[data-visible="true"] .image .mask {opacity: 1;}

	.CTA[data-visible] .image::before {transition: transform 0.3s, opacity 0.1s;}
	.CTA[data-visible="false"] .image::before {transform: skewX(-21deg) translate(560rem, 0); opacity: 0}
	.CTA[data-visible="true"] .image::before {transform: skewX(-21deg) translate(0, 0); opacity: 1;}

	.CTA[data-visible] .image::after {transition: transform 0.3s, opacity 0.1s;}
	.CTA[data-visible="false"] .image::after {transform: skewX(21deg) translate(-560rem, 0); opacity: 0}
	.CTA[data-visible="true"] .image::after {transform: skewX(21deg) translate(0, 0); opacity: 1;}
}