.category-intro .flex {
	justify-content: space-between;
	position: relative;
	flex-wrap: nowrap;
}
.category-intro .flex .right {
	position: relative;
	width: 994px;
	margin: 0;
}
.category-intro .flex .right:before {
	content: "";
	display: block;
	background-image: url(../../assets/icons/utility/image-border.png);
	background-size: contain;
	background-position: center;
	width: 235px;
	height: 418px;
	position: absolute;
	top: 50px;
	left: -30px;
	transform: rotate(-2deg);
	z-index: 1;
}
.category-intro .flex .right .overlay {
	width: 100%;
	height: 100%;
	background: #121216;
	position: absolute;
	opacity: 0.55;
	top: 0;
	left: 0;
}
.category-intro .flex .right .small {
	width: 231px;
	height: 413px;
	position: absolute;
	top: 52px;
	left: -28px;
	transform: rotate(-2deg);
}
.category-intro .flex .right .large {
	width: 100%;
	height: 514px;
}
.category-intro .flex .left {
	width: 23%;
	text-align: center;
	margin: 0 auto;
	color: white;
	display: table;
}
.category-intro .flex .left h1:before {
	content: "";
	display: block;
	background-image: url(../../assets/icons/utility/icon.png);
	background-size: contain;
	background-position: center;
	width: 56px;
	height: 73px;
	margin: 0 auto 17px;
}
.category-intro .flex .left a {
	font-family: 'OaksGrotesk';
	font-weight: 600;
	color: white;
	font-size: 12px;
	letter-spacing: 0.01rem;
	text-decoration: none;
}
.category-intro .flex .left a:hover {
	text-decoration: underline;
}
.category-intro .flex .left p {
	margin: 0 0 10px;
}
.category-intro .flex .left h1 {
	margin: 0 0 92px;
	font-size: 35px;
}
@media all and (max-width:1280px) {
	.category-intro .flex .right {
		width: 65%;
	}
}
@media all and (max-width:768px) {
	.category-intro .flex .right .large {
		width: 100%;
		height: 380px;
	}
	.category-intro .flex .right .small {
		width: 128px;
		height: 223px;
		top: 69px;
		left: -28px;
	}
	.category-intro .flex .right:before {
		width: 131px;
		height: 240px;
		position: absolute;
		top: 60px;
		left: -30px;
	}
	.category-intro .flex .left h1 {
		margin: 0 0 40px;
		font-size: 28px;
	}
	.category-intro .flex .right {
		width: 60%;
	}
}
@media all and (max-width:600px) {
	.category-intro .flex{
		flex-direction: column-reverse;
	}
	.category-intro .flex .right {
		width: 100%;
	}
	.category-intro .flex .left {
		margin: 150px auto 30px;
		width:100%;
	}
	.category-intro .flex .right .small {
		top: inherit;
		bottom: -130px;
		left: 0;
		right: 0;
		margin: auto;
	}
	.category-intro .flex .right:before {
		width: 131px;
		height: 240px;
		position: absolute;
		top: inherit;
		left: 0;
		right: 0;
		margin: auto;
		bottom: -139px;
	}
	
}