.items_listing {
	overflow: hidden;
}

.items_listing > .wrap {
	display: flex;
	padding: 0;
}

.items_listing > .wrap > .col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 8%;
	flex: 1;
	position: relative;
}

.items_listing > .wrap > .col:first-child::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	background-color: inherit;
	transform: translateX(-100vw);
}

.items_listing > .wrap > .col:first-child::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 8%;
	height: 8%;
	aspect-ratio: 1;
	background-color: inherit;
	transform: translateX(50%)rotate(45deg);
	z-index: 99;
}

.items_listing > .wrap > .col:last-child::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100%;
	background-color: inherit;
	transform: translateX(100vw);
}

.items_listing .item {
	margin-bottom: 20px;
}

.items_listing .col_content_wrap > .item:last-child {
	margin-bottom: 0px;
}

.items_listing .item h4 {
	text-transform: uppercase;
	width: fit-content;
	border-bottom: 1px solid #fff;
}


.items_listing > .wrap > .col:first-child h1,
.items_listing > .wrap > .col:first-child h2,
.items_listing > .wrap > .col:first-child h3 {
	font-size: 3em;
	font-weight: 700;
	margin-top: 0;
	line-height: 1.1;
	margin-bottom: 0.25em;
}

.items_listing > .wrap > .col.no-subtitle h1,
.items_listing > .wrap > .col.no-subtitle h2,
.items_listing > .wrap > .col.no-subtitle h3 {
	padding-bottom: 0.5em;
}

.items_listing > .wrap > .col h1 + h4,
.items_listing > .wrap > .col h2 + h4,
.items_listing > .wrap > .col h3 + h4 {
	font-size: 2em;
	line-height: 1.2;
	max-width: 63%;
	padding-bottom: 1.5em;
	margin-bottom: 0em;
	position: relative;
}

.items_listing > .wrap > .col:first-child > .col_content_wrap p {
	position: relative;
}

.items_listing > .wrap > .col:first-child > .col_content_wrap p:first-of-type {
	padding-top: 1em;
}

.items_listing > .wrap > .col:first-child > .col_content_wrap p:first-of-type::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 3px;
	background-color: var(--secondary-accent-color);
	margin-top: -1em;
}

@media only screen and (max-width: 980px) {
	.items_listing > .wrap {
		flex-direction: column;
	}
	
	.items_listing > .wrap > .col:first-child::after {
		top: unset;
		right: 0;
		left: 0;
		bottom: 0;
		transform: translateY(50%)rotate(45deg);
	}
}