$o-cta-bp1: 				428;
$o-cta-bp2: 				900;
$o-cta-bp3: 				$bp-max;
$o-cta-ornament-height: 	120px;

.o-cta {
	@include vspacing(
		'margin-top' 1
	);
	position: relative;
}


.o-cta__main {
	@include contain;

	@include mq($o-cta-bp2) {
		display: flex;
		justify-content: space-between;
	}

}


.o-cta__content {
	padding: space(7) 0;
	display: flex;
	flex-direction: column;
	justify-content: center;

	@include mq($o-cta-bp2) {
		flex: 1 1 50%;
		margin-right: column(0.5);
	}
}


.o-cta__quote {
	@include font-size(xl);
	@include font-weight(bold);
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	color: palette(tertiary, 400);
	quotes: '\201c' '\201d';
	&::before { content: open-quote; }
	&::after  { content: close-quote; }
}


.o-cta__heading {
	margin-bottom: space(3);
	color: palette(tertiary, 400);
}


.o-cta__desc {
	margin-bottom: space(3);
}


.o-cta__action {
	display: flex;

	& > * + * {
		margin-left: space(2);
	}
}


.o-cta__person {
	position: relative;
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
	grid-template-areas: "main";
	max-width: 428px;

	@include mq($o-cta-bp2) {
		flex: 1 1 50%;
		margin-top: space(-7);
	}
	@include mq($o-cta-bp3) {
		margin-right: column(0.5);
	}
}


.o-cta__img {
	grid-area: main;
	align-self: end;
}


.o-cta__circle-outer,
.o-cta__circle-inner {
	grid-area: main;
	align-self: end;
	margin-left: column(-1);
	margin-right: column(-1);

	@include mq($o-cta-bp1) {
		margin: 0;
	}
}


.o-cta__info {
	grid-area: main;
	align-self: end;
	justify-self: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding-bottom: space(2);
}


.o-cta__name {
	color: palette(primary, 700);
}


.o-cta__subtitle {
	color: palette(tertiary, 400);
}


.o-cta--on-dark {
	margin-bottom: calc(#{halve($o-cta-ornament-height)} + #{space(7)});
	color: palette(neutral, 0);
	background-color: palette(primary, 700);

	.o-cta__quote,
	.o-cta__heading {
		color: palette(neutral, 0);
	}

	.o-cta__name {
		color: palette(primary, 700);
	}

	.o-cta__subtitle {
		color: palette(tertiary, 400);
	}

	@include mq($o-cta-bp2) {
		&::after {
			content: '';
			display: block;
			position: absolute;
			bottom: 0;
			right: 0;
			width: 72px;
			height: 120px;
			background-image: url(/img/ornaments/ornament-1.svg);
			transform: translateY(50%);
		}
	}
}