.nav-card-container {
  margin: 0.7rem 0;

  .nav-card {
    display: grid;
    row-gap: var(--row-gap);
    column-gap: var(--column-gap);
    // 填充布局空白（避免网格留白）
    grid-auto-flow: row dense;
    grid-template-columns: repeat(auto-fill, minmax(var(--column-min-width), 1fr));

    &__item {
      position: relative;
      background-color: var(--vp-c-bg-soft);
      border: 1px solid var(--vp-c-bg-soft);
      border-radius: 10px;
      display: block;
      overflow: hidden;
      color: var(--vp-c-text-1);
      padding: 10px;
      transition: all 0.3s;
      text-decoration: none;
      cursor: pointer;

      &:hover {
        box-shadow: var(--vp-shadow-2);
        border-color: var(--vp-c-brand);
        background-color: var(--vp-c-bg-soft-up);
        color: var(--vp-c-text-1);
        transform: translateY(-4px);
      }

      &__info {
        display: flex;
        align-items: center;

        img {
          min-width: 40px;
          height: 40px;
          border-radius: 6px;
          margin-right: 10px;
        }
        .name {
          overflow: hidden;
          flex: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 16px;
          font-weight: 600;
        }
      }

      .desc {
        margin: 12px 0 0;
        line-height: 1.5;
        font-size: 12px;
        color: var(--vp-c-text-2);
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: var(--desc-line-clamp);
        -webkit-line-clamp: var(--desc-line-clamp);
      }

      .badge {
        position: absolute;
        top: 6px;
        right: 3px;
      }
    }

    @media (max-width: 960px) {
      &.index-4 {
        grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3 - 2 * var(--column-gap)), 1fr));
      }
    }
    @media (max-width: 768px) {
      &.index-4,
      &.index-3 {
        grid-template-columns: repeat(auto-fill, minmax(calc(100% / 2 - var(--column-gap)), 1fr));
      }
    }
    @media (max-width: 640px) {
      &.index-4,
      &.index-3,
      &.index-2 {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
      }
    }
  }
}