[class*="--striped-bg"] {
	--angle: 109deg;

	/* tilt */
	--orange: #f59e0b;

	/* strip color */
	--gap: 15%;

	/* width of white gap */
	--small: 18%;

	/* width of small strip */
	--big: 100%;

	/* width of big strip */
	--start: 13%;

	/* where first strip starts */

	/* precompute positions for readability (optional) */
	--p0: var(--start);
	--p1: calc(var(--start) + var(--small));
	--p2: calc(var(--start) + var(--small) + var(--gap));
	--p3: calc(var(--start) + var(--small) + var(--gap) + var(--big));

	background: linear-gradient(
		var(--angle),
		/* white before first strip */ #fff 0 var(--p0),
		#fff var(--p0) var(--p0),
		/* clamp edge, small orange strip */ var(--orange) var(--p0) var(--p1),
		var(--orange) var(--p1) var(--p1),
		/* clamp edge, white gap */ #fff var(--p1) var(--p2),
		#fff var(--p2) var(--p2),
		/* clamp edge, big orange strip */ var(--orange) var(--p2) var(--p3),
		var(--orange) var(--p3) var(--p3),
		#fff var(--p3) 100%
	);

	background-repeat: no-repeat;
	background-size: 100% 630px;
	background-position: bottom center;
	min-height: 350px;
	padding-bottom: 3.75rem;
}

.content-highlights {
	padding-bottom: 4rem;
}

.content-highlights__wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6rem;
}

.content-highlights .col-5,
.content-highlights .col-7 {
	width: 100%;
}

.content-highlights__description {
	padding-bottom: 2rem;
}

.content-highlights__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.content-highlight-item {
	padding: 1.25rem 2rem 1.75rem 1.25rem;
	background: var(--white);
	border: 1px solid #d4cfca;
	border-radius: 8.8px;
}

.content-highlight-item:hover {
	background: var(--peach);
}

.content-highlight-item > .content-highlight-item__body {
	display: grid;
	row-gap: 1.5rem;
	column-gap: 1.75rem;
	grid-template-areas:
		"meta outbound"
		"title outbound";
}

.content-highlight-item__meta {
	grid-area: meta;
	grid-column: 1/3;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.content-highlight-item__eyebrow {
	color: var(--primary-red);
	margin: 0;
	font-size: 1.25rem;
}

.content-highlight-item__date {
	font-size: 0.75rem;
	line-height: 110%;
	color: var(--orange);
	letter-spacing: 12%;
	font-weight: 700;
	text-transform: uppercase;
}

.content-highlight-item__separator {
	width: 0.5rem;
	height: 0.5rem;
	flex: 0 0 0.5rem;
	background: #000;
	display: inline-block;
	transform: rotate(45deg);
}

.content-highlight-item__outbound {
	grid-area: outbound;
	display: flex;
	align-items: center;
	z-index: 1;
}

.content-highlight-item__outbound-icon {
	background: url(../../images/decorative-items/export-arrow.svg) no-repeat
		center right/1.5rem;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.content-highlights__title,
.content-highlight-item__title {
	color: var(--black);
	line-height: 115%;
}

.content-highlights__title {
	font-size: 1.75rem;
	margin-bottom: 1rem;
}

.content-highlight-item__title {
	grid-area: title;
	font-size: 1.25rem;
	margin: 0;
}

@media all and (min-width: 575px) {
	[class*="--striped-bg"] {
		--gap: 4%;
		--small: 5%;
		--big: 100%;
		--start: 47%;
		background-repeat: no-repeat;
		background-size: 100% 500px;
		background-position: bottom center;
	}
}

@media all and (min-width: 768px) {
	[class*="--striped-bg"] {
		background-size: cover;
		background-position: top center;
	}

	.content-highlights__wrapper {
		gap: 3.75rem;
	}

	.content-highlight-item__meta {
		flex-wrap: initial;
	}

	.content-highlights__list {
		gap: 1.25rem;
	}

	.content-highlights .col-5 {
		width: 35%;
	}

	.content-highlights .col-7 {
		width: 55%;
	}
}

@media all and (min-width: 992px) {
	.content-highlights {
		padding: 4.5rem 0;
	}

	.content-highlights .col-5 {
		width: 30%;
	}

	.content-highlights .col-7 {
		width: 60%;
	}

	.content-highlights__title {
		font-size: 2.5rem;
	}

	.content-highlights__description {
		font-size: 1.25rem;
		line-height: 2rem;
	}
}