.articles-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  article {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    position: relative;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    border-radius: 4px;
    @include max-width(768) {
      margin: 15px 0;
    }
    .content {
      @include max-width(768) {
        padding-bottom: 1.5rem;
      }
    }
    &:nth-of-type(4n+1), &:nth-of-type(4n+2){
      // 2 на ред
      flex-direction: column;
      @include min-width(768) {
        margin-top: 25px;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        .img-wrapper {
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          img {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
          }
        }
        .content {
          width: 80%;
          display: block;
          margin: auto;
          top: -3rem;
          position: relative;
          background: #fff;
          padding: 1rem;
          border-radius: 4px;
          text-align: center;
          @include breakpoint-only(md) {
            width: 90%;
          }
          h2 {
            height: 42px;
            word-wrap: break-word;
            display: block;
          }
          p {
            display: block;
            height: 90px;
            overflow: hidden;
          }
        }
      }
    }
    &:nth-of-type(4n+3), &:nth-of-type(4n+4){
      // 1 на ред
      flex-direction: column;
      @include min-width(768) {
        text-align: left;
        flex-direction: row;
        margin: 1rem 0;
        .img-wrapper {
          width: 40%;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
          img {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
          }
        }
        .content {
          padding: 0 1rem;
          padding-top: 1rem;
          width: 60%;
          @include max-width(992) {
            padding-top: .2rem;
            padding-bottom: .2rem;
          }
          p {
            @include max-width(992) {
              font-size: rem(13);
              margin-bottom: .5rem;
              height: 40px;
              overflow: hidden;
            }
          }
        }
      }
    }
    @include max-width(768) {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
      text-align: center;
      .img-wrapper img {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
    }
    @include max-width(450) {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
    a {
      text-decoration: none;
    }
    .content {
      -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
      -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
      box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      @include max-width(768) {
        padding: .4rem .3rem;
      }
      h2 {
        font-weight: $fw-medium;
        font-size: rem(17);
        @include max-width(992) {
          font-size: rem(15);
        }
        @include max-width(768) {
          @include min-width(450) {
            height: 36px;
            overflow: hidden;
          }
        }
        a {
          color: $dark-gray;
          @include transition(all 0.2s ease);
          &:hover {
            color: $pink;
          }
        }
      }
      p {
        font-size: rem(14);
        color: $light-gray-text;
        @include max-width(992) {
          font-size: rem(13);
        }
        @include max-width(768) {
          @include min-width(450) {
            height: 78px;
            overflow: hidden;
          }
        }
      }
      .read-more {
        font-size: rem(14);
        background: $pink;
        color: #fff;
        @include breakpoint-only(md) {
          font-size: rem(12);
          padding: .3rem .75rem;
        }
      }
    }
    .article-info {
      font-size: rem(14);
      color: lighten($dark-gray, 15%);
      display: block;
      margin-bottom: 5px;
      @include max-width(992) {
        font-size: rem(12);
      }
      i {
        font-size: rem(12);
        letter-spacing: -2px;
        position: relative;
        top: -1px;
        color: #fdd171;
        @include max-width(992) {
          font-size: rem(11);
        }
        &.empty {
          color: lighten($dark-gray, 15%);
        }
      }
    }
  }
}