HTML
<div class="boxs">
<div class="box1">
<a href = "#">
<div class="card-image"><img src = "images/m8 (4).png"></div>
<div class="body">
<div class="post_card_title">
<span itemid="headline">
<a href="#">
BMW M8
</a>
</span>
</div>
</div>
</a>
</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
CSS
.boxs{
display: flex;
flex-wrap: wrap;
margin-left: -20px;
margin-right: -20px;
}
.box1{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 50px;
width: 570px;
height: 318px;
padding: 20px;
}
.card-image{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.card-image img{
width: 100%;
height: 100%;
display: block;
}
.body{
justify-content: flex-end;
min-height: 200px;
display: flex;
flex-direction: column;
position: relative;
flex-basis: 0;
max-width: 100%;
}
.post_card_title{
padding-top: 100px;
color: #fff;
font-size: 1.5em;
z-index: 4;
}