@charset "utf-8";
/* CSS Document */

 .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    justify-content: center;
}

        /* 瀑布流容器 */
        .waterfall-container {
            max-width: 1200px;
            margin: 0 auto;
            column-count: 3;
            column-gap: 20px;
        }

        /* 卡片项 */
        .card {
            break-inside: avoid; /* 防止卡片被截断 */
            background: var(--card-bg);
            border-radius: var(--radius);
            box-shadow: 0 8px 24px var(--shadow);
            margin-bottom: 20px;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
        }

        .card:hover {
         
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
        }

        /* 图片样式 */
        .card img {
            width: 100%;
            height: auto;
            display: block;
           
        }

       

        /* 标题区域 */
        .card-content {
            padding: 15px 18px 18px;
        }

        .card-title {
            font-size: 17px;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 6px;
        }

        .card-desc {
            font-size: 0.85rem;
            color: var(--text-sub);
        }

        /* ================= 响应式断点 ================= */
        @media (max-width: 1024px) {
            .waterfall-container {
                column-count: 3;
            }
        }

        @media (max-width: 768px) {
            .waterfall-container {
                column-count: 2;
                padding: 0 10px;
            }
            header h1 {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 480px) {
            .waterfall-container {
                column-count: 1;
            }
        }
		
		
		.overlay {
  position: relative;    
  height: 100%;         
}

.icon {
  
  top: 50%;           
  left: 50%;            

}