<div class="blog__wrap">
<div class="blog__item">
<div class="blog__image">
<img src="https://lorempixel.com/200/150/" alt="">
</div>
<h3 class="blog__title">11111111111111111111111111111К юбилею сотрудничества Михаэля Шумахера и Mercedes</h3>
<div class="blog__text">
<p>В конце года Mercedes отметит круглую дату с начала сотрудничество</p>
</div>
<a href="" class="button">Подробнее</a>
</div>
<div class="blog__item">
<div class="blog__image">
<img src="https://lorempixel.com/200/250/" alt="">
</div>
<h3 class="blog__title">К юбилею сотрудничества Михаэля Шумахера и Mercedes</h3>
<div class="blog__text">
<p>2222222222222222222222222222В конце года Mercedes отметит круглую дату с начала сотрудничествоц</p>
</div>
<a href="" class="button">Подробнее</a>
</div>
<div class="blog__item">
<div class="blog__image">
<img src="https://lorempixel.com/200/150/" alt="">
</div>
<h3 class="blog__title">К юбилею сотрудничества Михаэля Шумахера и Mercedes</h3>
<div class="blog__text">
<p>В конце года Mercedes отметит круглую дату с начала сотрудничество</p>
</div>
<a href="" class="button">Подробнее</a>
</div>
<div class="blog__item">
<div class="blog__image">
<img src="https://lorempixel.com/200/200/" alt="">
</div>
<h3 class="blog__title">К юбилею сотрудничества Михаэля Шумахера и Mercedes</h3>
<div class="blog__text">
<p>В конце года Mercedes отметит круглую дату с начала сотрудничество</p>
</div>
<a href="" class="button">Подробнее</a>
</div>
</div>
.blog__wrap {
display: box;
display: flex;
display: flexbox;
display: flex;
margin-right: -20px;
margin-left: -20px;
}
.blog__item {
width: calc(100% / 4 - 40px);
width: calc(100% / 4 - 40px);
margin-right: 20px;
margin-left: 20px;
display: flex;
flex-direction: column;
}
.blog__image{
position: relative;
&::before {
display: block;
content: '';
width: 100%;
height: 0;
padding-bottom: percentage(3/4);
}
}
.blog__image img {
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
object-fit: cover;
}
$lines: 3;
.blog__title {
font-size:20px;
line-height: 1.2;
height: (20px * 1.2) * $lines;
overflow: hidden;
display: box;
box-orient: vertical;
line-clamp: $lines;
}
.blog__text {
margin-bottom: auto;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.