<div class="article-block">
 <div class="article">
   <div class="article__content">
     <div class="article__image">
       <img src="http://lorempixel.com/400/400/food/" alt="">
     </div>
     <div class="article__title">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
     <div class="article__desc"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, eligendi minima? Libero totam officia autem dicta asperiores vitae deserunt doloribus beatae facilis, cupiditate consequatur impedit nihil, accusantium quia sed eius.</p></div>
   </div>
 </div>
 <div class="article">
   <div class="article__content">
     <div class="article__image">
       <img src="http://lorempixel.com/400/400/food/?1" alt="">
     </div>
     <div class="article__title">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
   </div>
 </div>
 <div class="article">
   <div class="article__content">
     <div class="article__image">
       <img src="http://lorempixel.com/400/400/food/?2" alt="">
     </div>
     <div class="article__title">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
   </div>
 </div>
 <div class="article">
   <div class="article__content">
     <div class="article__image">
       <img src="http://lorempixel.com/400/400/food/?3" alt="">
     </div>
     <div class="article__title">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
   </div>
 </div>
 <div class="article">
   <div class="article__content">
     <div class="article__image">
       <img src="http://lorempixel.com/400/400/food/?4" alt="">
     </div>
     <div class="article__title">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
   </div>
 </div>
</div>

.article-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 10px;
}

.article {
  box-sizing: border-box;
  width: 25%;
  position: relative;
  padding-bottom: 25%;
  &__content {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
  }

  &__image {
    background: #cccccc;
    width: 100%;
    flex-grow: 1;
    position: relative;
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &__title {
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    margin-top: 0.5rem;
  }
  &__desc {
    p {
      &:last-child { margin-bottom: 0; }
    }
  }
  &:first-child { width: 50%; }
  &:first-child &__title { font-size: 25px; }
  &:first-child &__content { height: 200%; }
  &:nth-child(4) { margin-left: 50%; }
}


@media (max-width: 600px) {
  .article-block { display: block; }
  .article {
    width: 100%;
    margin-left: 0;
    padding-bottom: 0;
    
    &__image { min-height: 100px; }
    &__image img { position: static; display: block; max-height:200px; }
    &__content { position: static;   }

    &:first-child { width: 100%; }
    &:first-child &__title { font-size: 18px; }
    &:first-child &__content { height: auto; }
    &:nth-child(4) { margin-left: 0; }
  }
}