.layout-detail-container {
  .block-snapshoot {
    //width: 80px;
    margin-bottom: 20px;
  }
}

.block-detail-container {
  overflow: hidden;
  display: flex;
  flex: auto;
  margin-top: 35px;

  .block-detail-content {
    margin-right: 30px;
    background: #fcfcfc;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);

    .block-snapshoot {
      img {
        width: 100%;
      }
    }
  }

  @media (max-width: 750px) {
    .block-detail-content {
      margin: 0;
    }
  }

  .block-info {
    flex: auto;

    .block-name {
      margin-top: 0;
      font-size: 20px;
      color: #333;
    }

    .block-sub-name {
      font-size: 20px;
      color: #666;
      -webkit-font-smoothing: antialiased;
      font-weight: 300;
      margin-top: 10px;
      margin-bottom: 20px;
    }

    .block-links {
      display: flex;
      padding-bottom: 20px;
      border-bottom: 1px solid #d8d8d8;
    }
    .block-meta {
      display: flex;
      flex-direction: column;
      .use-components {
        line-height: 2.5em;
        .next-btn {
          margin: 0 5px;
        }
      }
      .list-item {
        width: 100%;
        color: #999;
        padding: 10px 0;
      }
    }
  }
}

a.list-item-link {
  color: #333;

  &:after {
    content: '，';
  }
  &:last-child:after {
    content: '';
  }
  &:hover {
    color: #1b73ff;
  }
}