.blog-items
  .blog-item
    position: relative
    border-bottom: 1px solid $lighterGray
    margin-bottom: 50px
    a
      height: 200px
      +flex(space-between, flex-start)
    .image
      height: 100%
      width: 280px
      background-color: $lighterGray
      position: relative
      .image-container
        position: absolute
        width: 100%
        height: 100%
        background-size: cover
        background-position: center
      .placeholder
        position: absolute
        width: 100%
        height: 100%
        +flex(center, center)
        .icon
          +sprite(0 0, 67px, 30px)
          display: inline-block
    .information
      width: calc(100% - 300px)
      padding: 10px 0
      h3
        +font-semi-bold(20px, 24px)
        color: $darkBlue

      .content
        h2
          +font-semi-bold(18px, 22px)
          font-size: 17px
          color: $darkBlue

        p, span, li
          +font-light(18px, 22px)
          font-size: 15px
          color: $lightBlue

      .read-more
        +font-default()
        font-size: 16px !important
        line-height: 16px !important
        color: $orange
        &:after
          content: ''
          margin-left: 8px
          +arrowOrange
          +transition(all 0.3s)
          +translate3d(0, 0,0)
      .date
        +font-light(17px, 22px)
        font-size: 14px
        color: $gray
        position: absolute
        bottom: 15px
        right: 0
        margin: 0

    &:hover
      .information
        .read-more:after
          +translate3d(5px,0,0)
+media-query(740px)
  .blog-items
    .blog-item

      max-width: 480px
      margin-left: auto
      margin-right: auto
      a
        height: auto
        display: block
        width: 100%
      .image
        height: 280px
        width: 100%

      .information
        width: 100%
        padding: 20px 0
        .date
          bottom: 0
          position: relative
          text-align: right

+media-query(700px)
  .pagination-container .pagination-custom
    li
      display: none
      &:last-child, &:first-child
        display: block