/* ------------------------------------------------------------ *\
	Section Callout
\* ------------------------------------------------------------ */

.section-callout {
	position: relative;
	overflow: hidden;
	padding: 83px 0 97px;
	background: var(--c-navy);
	color: var(--c-white);

	/* Vertical strips: the horizontal pattern rotated around its top-left corner */
	.pattern {
		transform-origin: 0 0;
		transform: rotate(90deg) translateY(-100%);
	}

	.pattern--start {
		top: 13px;
		left: 0;
	}

	.pattern--end {
		top: 0;
		left: calc(100% - 119px);
	}

	.shell {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}

	.title span {
		display: block;
	}
}

@media (max-width: 1023px) {
	.section-callout {
		padding: var(--section-spacing) 0;

		.shell {
			padding-inline: 100px;
		}
	}
}

@media (max-width: 767px) {
	.section-callout {
		.pattern {
			transform: rotate(90deg) translateY(-100%) scale(.5);
		}

		.pattern--end {
			left: calc(100% - 60px);
		}

		.shell {
			gap: 30px;
			padding-inline: 70px;
		}
	}
}

@media (max-width: 575px) {
	/* Horizontal strips at the top and bottom edges */
	.section-callout {
		padding: 135px 0;

		.pattern {
			left: 50%;
			width: 603px;
			height: 75px;
			transform-origin: 50% 50%;
			transform: translateX(-50%) rotate(180deg);
		}

		.pattern--start {
			top: 0;
		}

		.pattern--end {
			top: auto;
			bottom: 0;
			left: 50%;
		}

		.shell {
			padding-inline: 25px;
		}
	}
}