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

  .img-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 {
      background-color: var(--vp-c-bg);
      border: 1px solid var(--vp-c-divider);
      border-radius: 3px;
      display: block;
      overflow: hidden;
      color: var(--vp-c-text-1);
      transition: all 0.3s;
      text-decoration: none;
      cursor: pointer;

      &:hover {
        box-shadow: var(--vp-shadow-2);
        transform: translateY(-3px);
        color: var(--vp-c-text-1);
      }

      &__img {
        overflow: hidden;
        position: relative;
        background: #eeeeee;
        height: var(--img-height);
        img {
          display: block;
          width: 100%;
          height: 100%;
          transition: all 0.3s;
          object-fit: var(--img-object-fit);
        }

        /* 鼠标悬停图片放大 */
        // &:hover {
        //   img {
        //     transform: scale(1.1, 1.1);
        //     opacity: 0.75;
        //   }
        // }
      }

      &__info {
        padding: 0.8rem 1rem;
        p {
          margin: 0;
        }
        .desc {
          margin-top: 0.3rem;
          opacity: 0.8;
          font-size: 0.9rem;
          line-height: 1.1rem;
          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);
        }
      }

      &__footer {
        display: flex;
        overflow: hidden;
        padding: 0.8rem 1rem;
        border-top: 1px solid var(--vp-c-divider);
        img {
          width: 1.8rem;
          height: 1.8rem;
          border-radius: 50%;
        }
        span {
          line-height: 1.8rem;
          margin-left: 0.6rem;
          font-size: 0.8rem;
        }
      }
    }

    @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));
      }
    }
  }
}