.cards {
    width: 802px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    row-gap: 8px;
    column-gap: 20px;
    align-items: stretch;
    justify-items: stretch;
    box-sizing: border-box;
}

.cards .card-item {
    width: 100%;
    cursor: pointer;
    transition: transform 0.24s ease;
}

.cards .card-item img {
    width: 100%;
    display: block;
    object-fit: contain;
    transition: opacity 0.24s ease;
}

.cards .card-item:hover {
    transform: scale(1.02);
}

.cards .card-item:hover img {
    opacity: 0.85;
}

/* 1200px 小显示器、平板横屏：宽度100%，保持3列 */
@media (max-width:1200px) {
    .cards {
        width: 100%;
    }
}

/* 992px 平板竖屏、折叠屏：改为2列 */
@media (max-width:992px) {
    .cards {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        row-gap: 8px;
        column-gap: 16px;
        align-items: stretch;
    }
}

/* 768px 手机端：2列，间隙缩小 */
@media (max-width:768px) {
    .cards {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        row-gap: 8px;
        column-gap: 14px;
        align-items: start;
    }

    .cards .card-item {
        min-height: 180px;
    }
}