.flink#article-container
  .post-cards
    margin: -10px 10px 0

    .md-links
      overflow: auto
      text-align: center

      & > .md-links-item
        position: relative
        float: left
        overflow: hidden
        margin: 20px 7px
        width: calc(100% / 3 - 15px)
        height: 90px
        border-radius: 8px
        line-height: 17px
        transform: perspective(1px) translateZ(0)

        &:hover
          img
            transform: rotate(540deg)

        &:before
          position: absolute
          top: 0
          right: 0
          bottom: 0
          left: 0
          z-index: -1
          background: $light-blue
          content: ''
          transition-timing-function: ease-out
          transition-duration: .3s
          transition-property: transform
          transform: scale(0)

        &:hover:before,
        &:focus:before,
        &:active:before
          transform: scale(1)

        a
          color: $font-color
          text-decoration: none

          img
            float: left
            margin: 13px 0 0 10px
            width: 65px
            height: 65px
            border-radius: 35px
            transition: all .3s

          .img-alt
            display: none

          .md-links-title
            overflow: hidden
            padding: 16px 10px 0 0
            height: 40px
            text-overflow: ellipsis
            white-space: nowrap
            font-weight: bold
            font-size: 20px

          .md-links-des
            overflow: hidden
            padding: 16px 10px
            height: 50px
            text-overflow: ellipsis
            white-space: nowrap
            font-size: 13px

@media screen and (max-width: 1100px)
  .flink
    .md-links
      .md-links-item
        width: calc(50% - 15px) !important

@media screen and (max-width: 600px)
  .flink
    .md-links
      .md-links-item
        width: calc(100% - 15px) !important