.flink
  .post-cards
    margin: -10px 10px 0

    .md-links
      overflow: auto
      margin: 0 auto
      padding: 0
      text-align: center

      & > .md-links-item
        position: relative
        float: left
        overflow: hidden
        margin: 20px 7px
        padding: 0
        width: calc(100% / 3 - 14px)
        height: 90px
        border-radius: 8px
        list-style: none
        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: #333
          text-decoration: none

          img
            float: left
            margin: 11px 10px
            padding: 4px
            width: 70px
            height: 70px
            border-radius: 35px
            transition: all .3s

          .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

  .comment-word
    font-weight: bold
    font-size: 1.7em

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

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