<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: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: -20px;
  margin-left: -20px;
}

.blog__item {
  width: -webkit-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: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
}

.blog__text {
  margin-bottom: auto;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.