.newsmag-recent-posts {
  margin-bottom : 20px;
  > ul {
    padding         : 0;
    list-style-type : none;
    display         : inline-block;
    width           : 100%;
    margin          : 20px 0;
    > li {
      @media (min-width : 768px) {
        width  : 33.3333333333%;
        height : 240px;
      }
      width               : 100%;
      height              : 360px;
      display             : inline-block;
      float               : left;
      position            : relative;
      background-position : 50% 50%;
      background-size     : cover;
      -moz-transition     : all 0.3s;
      -webkit-transition  : all 0.3s;
      transition          : all 0.3s;
      @media (min-width : 990px) {
        background-size : 100%;
        &:hover {
          -moz-transition    : all 0.3s;
          -webkit-transition : all 0.3s;
          transition         : all 0.3s;
          background-size    : 115%;
        }
      }

      &:after {
        position : absolute;
        bottom   : 0;
        left     : 0;
        width    : 100%;
        height   : 50%;
        @include linearGradient(transparentize(#000, 1), transparentize(#000, 0.1));
        content  : '';
      }
      &:nth-child(-n+2) {
        @media (min-width : 768px) {
          width  : 50%;
          height : 360px;
        }
      }
      > img {
        width : 100%;
      }
      .newsmag-post-info {
        position   : absolute;
        bottom     : 15%;
        left       : 8%;
        max-height : 95px;
        z-index    : 1;
      }
      .newsmag-category {
        background-color : $color__brand-red;
        padding          : 11px 21px;
        text-transform   : uppercase;
        font-weight      : 600;
        font-family      : $font__alternate;
        color            : #FFF;
        font-size        : 13px;
        display          : inline-block;
        > a {
          color : #FFF;
          &:hover {
            color : #FFF;
          }
        }
      }
      h3 {
        color          : #FFF;
        font-size      : 20px;
        font-weight    : 600;
        text-transform : uppercase;
        display        : block;
        > a {
          color : #FFF;
          &:hover {
            text-decoration : none;
          }
        }
      }
    }
  }
}