/*请自己找到这个位置*/
.volantis-flink-list
  display: flex
  flex-wrap: wrap
  justify-content: flex-start
  margin: -0.5 * 16px
  align-items: stretch
  .site-card
    @extend .cardHover
    margin: 16px * 0.5
    width: "calc(100% / 4 - %s)" % 16px
    @media screen and (min-width: 2048px)
      width: "calc(100% / 5 - %s)" % 16px
    @media screen and (max-width: 768px)
      width: "calc(100% / 3 - %s)" % 16px
    @media screen and (max-width: 500px)
      width: "calc(100% / 2 - %s)" % 16px
    display: block
    height: 210px !important
    line-height: 1.4
    height 100%
    .img
      position: relative
      object-fit: cover
      margin: 0 !important
      width: 100%
      height 60%
      overflow: hidden
      transition: all .6s!important
      filter: blur(0)
      img
        width: 100%
        height 100%
        margin: 0 !important
        border-radius: 12px 12px 0 0 !important
        pointer-events:none;
        // trans(.75s)
        transition: background .6s,height .6s
        object-fit: cover

    .info
      position: relative
      height: 40%
      transition: background .6s,height .6s
      img
        position: absolute
        width: 100px
        height: 100px
        pointer-events:none
        background-size: cover
        border-radius: 50% !important
        top: -32px
        left: -32px
        transform: scale(.2)
        transition: all .6s !important
      #text
        position: relative
        top: 0px
        display: flex
        flex-direction: column
        padding-right: 10px
        margin-left: 35px
        transition: all .6s;
        .title
          max-width: 100%
          font-size: 16px
          line-height: 26px
          font-weight: 700
          color: var(--liushen-text)
          text-overflow: ellipsis
          white-space: nowrap
          overflow: hidden
        .desc
          font-size: var(--global-font-size)
          line-height: 26px
          color: var(--liushen-secendtext)
          overflow: hidden
          font-size: small
          margin-bottom: 10px
          max-height: 52px
          -webkit-line-clamp: 2
    &:hover
      .img
        height: 35%
        filter: blur(3px)
      .info
        height: 66%
        background: #f2b94b
        color: #fff
        img
          left: -10px
          top: -50px
          transform: rotate(-35deg) rotateX(1turn) rotateY(1turn) scale(.6)
        #text
          top: 26px
          margin-left: 10px
/*下面的不用动，为#article-container的定义*/