A single row with vertically cropped images

<div class="row">
	<div class="container">
		<div class="d-flex-row">
			<div class="image-wrap">
				<div class="box col-1"></div>
				<div class="box col-2"></div>
				<div class="box col-3"></div>
				<div class="box col-4"></div>
			</div>
			<div class="content-wrap">
				<p class="dark-red"><em><strong>Welcome to</strong></em></p>
				<h2>Quisque nibh dui</h2>
				<p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesqne nec, egestas non nisi. Donec rutrum congue leo eget malesuada.</p>
				<p class="readmore-wrap"><a href="#" class="read-more">Know more</a></p>
			</div>
		</div>
	</div>
</div>

.container{
	width:1160px;
	max-width:90%;
	margin:20px auto
}
.d-flex-row{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	align-items:center
}
.image-wrap{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	flex:1;
	margin-right:20px
}
.box{
	flex:1;
	width:33.33%;
	height:450px;
	background-size:cover;
	background-position:center;
	box-sizing:border-box;
	border-radius:5px
}
.box:nth-child(even){
	margin-top:20px;
}
.col-1{
	background-image:url(https://pixelthemes.com/wp-content/uploads/2023/12/pexels-ash-valiente-3533228_h_450.jpg)
}
.col-2{
	background-image:url(https://pixelthemes.com/wp-content/uploads/2023/12/fashion-1623089_h_450.jpg)
}
.col-3{
	background-image:url(https://pixelthemes.com/wp-content/uploads/2023/12/pexels-maksim-goncharenok-4750165_h_450.jpg)
}
.col-4{
	background-image:url(https://pixelthemes.com/wp-content/uploads/2023/12/fashion-1623088_h_450.jpg)
}
.content-wrap{
	width:35%
}
.dark-red{
	color:#e12b1e;
}
.read-more{
	text-decoration:none;
	text-transform:uppercase;
	padding:10px 15px;
	display:inline-block;
	background-color:#e12b1e;
	color:#fff;
	border-radius:5px;
	outline:none
}
.read-more:hover{
	background-color:#000
}
@media(max-width:768px){
	.d-flex-row{
		flex-direction:column;
		align-items:unset
	}
	.image-wrap{
		margin:0;
	}
	.content-wrap{
		width:100%
	}
}