.ul-class-1 {
  margin: 0 -8px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  .item {
    padding: 8px;
    margin: 8px;
    background-color: #f0f0f0;
    width: calc(50% - 32px);
    border-radius: 8px;

    .title {
      font-size: 16px;
    }

    .desc {
      font-size: 12px;
      color: #333;
      white-space: break-spaces;
      // 最多2行
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .image {
      width: 100%;
      height: 100px;
      background-color: #ddd;
      border-radius: 8px;
      margin: 6px 0;
    }

    .footer {
      font-size: 12px;
      color: #666;
    }

    &.colord-blue {
      background-color: rgb(53, 122, 250);
      color: #fff;

        .title {
            color: #fff;
        }

        .desc {
            color: #fff;
        }

        .footer {
            color: #fff;
        }
    }
  }
}