.design-cover {
  width: 100%;
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;

  > div {
    transition: all 0.2s cubic-bezier(0, 0, 1, 1);
  }

  .cover-image {
    overflow: hidden;
    width: 100%;
    cursor: pointer;
    text-align: center;
    position: relative;
    border-radius: 4px;
  }

  .design-text-wrapper {
    cursor: pointer;
  }

  .design-title {
    font-size: 14px;
    margin-top: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;

    > span {
      margin-left: 8px;
    }
  }

  .design-desc {
    font-size: 13px;
    line-height: 22px;
    color: var(--color-text-2);
    max-height: 44px;
    margin-top: 8px;
    margin-bottom: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    position: absolute;
    opacity: 0;
    bottom: -16px;
  }

  .figma-logo {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 32px;
    padding-top: 6px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0, 0, 1, 1);
  }

  &:hover {
    // box-shadow: 0 4px 34px rgba(0, 0, 0, 7%);

    .cover-image {
      img {
        transition: all 0.2s cubic-bezier(0, 0, 1, 1);
        transform-origin: center;
        transform: scale(1.04);
      }
    }

    .design-title {
      color: rgba(var(--primary-6));
    }

    .design-desc {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      opacity: 1;
      bottom: 0;
      transform: translateY(0) !important;
    }

    .figma-logo {
      opacity: 1;
    }
  }
}

.design-cover-animate-22 {
  &:hover {
    > div {
      transform: translateY(-30px);
    }
  }
}

.design-cover-animate-44 {
  &:hover {
    > div {
      transform: translateY(-52px);
    }
  }
}