.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.case-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}
.case-item {
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

        /* 案例卡片hover上浮+阴影 */
        .case-item:hover {
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            transform: translateY(-5px);
        }
        /* 案例图片hover渐变遮罩 */
        .case-item .img-wrap {
            position: relative;
            overflow: hidden;
        }
        .case-item .img-wrap::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(0,150,136,0.1));
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .case-item:hover .img-wrap::after {
            opacity: 1;
        }
        .case-item img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            transition: transform 0.5s ease; /* 图片hover缩放 */
        }
        .case-item:hover img {
            transform: scale(1.08);
        }
        .case-item .title {
            padding: 10px;
            text-align: center;
            font-size: 14px;
            color: #333;
            transition: color 0.3s;
        }
        .case-item:hover .title {
            color: #009688;
            font-weight: 500;
        }


               .hero {
            background: linear-gradient(rgb(186 211 205 / 90%), rgb(167 185 181 / 80%)), url(../images/xjyy.jpg) center / cover no-repeat;
        }