.case-list {
    --gap: calc(60 * var(--rpx));
    --column: 3;
}

.case {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    min-height: calc(280 * var(--rpx));
    padding: calc(30 * var(--rpx));
    border-radius: calc(30 * var(--rpx));
    border: none;
    box-shadow: inset 0 0 0 calc(2 * var(--rpx)) rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: box-shadow 0.2s, background 0.2s;
}

.case:hover {
    box-shadow: inset 0 0 0 calc(2 * var(--rpx)) rgba(72, 119, 255, 0.55);
    background: rgba(66, 108, 233, 0.18);
}

.case .tag {
    font-weight: 600;
}

.case:hover .name {
    color: var(--theme-blue);
}

.case .name {
    margin-top: calc(24 * var(--rpx));
    font-weight: 600;
    font-size: calc(22 * var(--fpx-67));
    line-height: calc(36em / 28);
    flex: 1 1 auto;
    width: 100%;
    padding-right: calc(40 * var(--rpx));
    box-sizing: border-box;
}

.case i.btn-expand {
    position: absolute;
    right: calc(30 * var(--rpx));
    bottom: calc(30 * var(--rpx));
    width: calc(28 * var(--rpx));
    height: calc(28 * var(--rpx));
    flex-shrink: 0;
    background: url("../images/icon_plus_hollow.svg") center/contain no-repeat;
}

.case-list-wrap {
    width: 100%;
}

/* 写在 .case 之后，与 .flex-box .flex-item 同级特异性，靠后覆盖 display */
.case.case-card-hidden {
    display: none;
}

.case-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: calc(60 * var(--rpx));
}

.case-more-wrap.is-empty {
    display: none;
}

@media (max-width: 1200px) {
    .case-list {
        --column: 2;
    }
}

@media (max-width: 828px) {
    .case-list {
        --column: 1;
        --gap: calc(30 * var(--rpx));
    }

}