.o-callout-bar {
	position: relative;
	text-align: center;

	&[data-ornament-type="filled"]::after {
		$aspectRatio: 1.15625;
		$width: 10vw;
		content: '';
		display: block;
		width: #{$width};
		height: #{$width * $aspectRatio};
		position: absolute;
		background-image: url(/img/ornament-hexagon--filled.svg);
		background-size: cover;
		left: 0;
		top: 0;
		transform: translateX(-50%) translateY(-50%);
	}
}

.o-callout-bar__main {
	@include contain;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	padding-top: space(10);
	padding-bottom: space(14);

	@include mq(700){
		max-width: column(8, 10);
	}
	@include mq(1000){
		max-width: column(8, 12);
	}
	@include mq(l){
		max-width: column(6, 12);
	}
}

.o-callout-bar__icon {
	color: palette(secondary, 500);
	margin-bottom: space(5);
}

.o-callout-bar__body {
	@include text-style(2);
	color: palette(text, 800);

	.on-dark & {
		color: white;
	}
}

.o-callout-bar__action {
	margin-top: space(5);
}