/* 支持5列布局的自定义CSS */
.col-xl-2-4 {
    position: relative;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}

/* 在超大屏幕上显示5列 */
@media (min-width: 1200px) {
    .col-xl-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* 调整卡片在小屏幕上的大小 */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .card-text {
        font-size: 0.875rem;
    }
}

/* 在中等屏幕上显示3列 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

/* 在大屏幕上显示4列 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}