#bannerBox{height: 40vh;}
.description {
            max-width: 600px;
            margin: 0 auto;
            color: #7f8c8d;}

        /* 瀑布流容器 */
        .waterfall {
display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: max-content;
    gap: 10px;}

        /* 瀑布流项目 */
        .item {
            break-inside: avoid;
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: white;}

        .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);}

        .item img {
            width: 100%;
            height: auto;
            display: block;
            cursor: pointer;
            transition: transform 0.5s ease;}

        .item:hover img {
            transform: scale(1.03);}

        .item-content {
            padding: 15px;}

        .item h3 {
            margin-bottom: 8px;
            font-size: 1.1rem;}

        .item p {
            font-size: 0.9rem;
            color: #7f8c8d;}


        /* 响应式调整 */
        @media (max-width: 768px) {
            .waterfall {
                columns: 2 200px;}
            
            .modal-content {
                max-width: 95%;}
        }

        @media (max-width: 480px) {
            .waterfall {
                columns: 1 300px;}
        }