.sites-wrap .grid-box
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
  grid-gap: 1rem 1rem
  .grid-cell
    aspect-ratio: 1.5

.sites-wrap .site-card .card-link
  width: 100%
  display: flex
  flex-direction: column
  position: relative
  .lazy-box
    border-radius: $border-card-s
    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
    overflow hidden
    >img
      object-fit: cover
      aspect-ratio: 1.5
      width: 100%
      height: 100%
  .info
    margin-top: 0.5rem
    line-height: 1.2
    position: relative
    .lazy-box
      float: left
      margin-right: 8px
      margin-top: 2px
      border-radius: @width
      corner-shape: superellipse(1)
      >img
        width: 28px
        height: @width
    span
      display: block
    .title
      font-weight: 500
      color: var(--text-p1)
      font-size: $fs-14
      margin-top: 1px
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 1
    .desc
      font-size: 10px
      margin-top: 2px
      word-wrap: break-word
      color: var(--text-p3)
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 1

  .labels
    position: absolute
    top: 2px
    right: 2px
    display: flex
    flex-wrap: wrap
    justify-content: flex-end
    pointer-events: none
    user-select: none
    opacity 1
    trans1 all
    .label
      font-weight: 500
      color: white
      font-size: 12px
      padding: 3px 6px 2px 6px
      margin: 2px
      line-height: 1
      border-radius: 16px

// transform
.sites-wrap .site-card .card-link
  >.lazy-box
    floatable-trans()
  &:hover
    .labels
      opacity 0
      transform: translateY(-4px)
    >.lazy-box
      floatable-float()