.bs-card {
  overflow: hidden;
  .arco-card-body {
    padding: 10px;
  }

  &.mini {
    .arco-card-body {
      padding: 0;
    }
  }

  &:hover {
    .cover {
      background-size: 105%;
    }
  }

  .cover {
    transition: background-size 0.25s linear;
    height: 164px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    .mask {
      transition: background-image 0.25s linear;
      position: relative;
      height: 100%;
      background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.1),
        rgba(255, 255, 255, 0)
      );
      p {
        margin: 0;
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        color: #fff;
        font-size: 18px;
      }
    }
  }

  .bottom-des {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    span {
      flex: 1;
      color: var(--color-text-3);
      padding-right: 40px;
      max-width: 160px;
    }
    a {
      cursor: pointer;
      color: rgb(var(--primary-6));
    }
  }
}
