/* 响应式网格布局 - 基于类名控制 */
[class*="grid-cols-"] {
    display: grid;
    grid-gap: 0rem;
    padding: 0rem;
}

/* 自定义间距系统 */
.grid-gap-0 { grid-gap: 0; }
.grid-gap-4 { grid-gap: 0.25rem; } /* 4px */
.grid-gap-5 { grid-gap: 0.32rem; } /* 5px */
.grid-gap-10 { grid-gap: 0.625rem; }  /* 10px */
.grid-gap-12 { grid-gap: 0.75rem; }    /* 12px */
.grid-gap-15 { grid-gap: 0.938rem; }  /* 15px */

/* 超小屏幕 (手机, 小于576px) */
.grid-cols-xs-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-xs-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-xs-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-xs-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-xs-5 { grid-template-columns: repeat(5, 1fr); }

/* 小屏幕 (平板, 576px 及以上) */
@media (min-width: 576px) {
    .grid-cols-sm-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-sm-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-sm-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-sm-4 { grid-template-columns: repeat(4, 1fr); }
}

/* 中等屏幕 (桌面显示器, 768px 及以上) */
@media (min-width: 768px) {
    .grid-cols-md-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-md-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-cols-md-6 { grid-template-columns: repeat(6, 1fr); }
}

/* 大屏幕 (大桌面显示器, 992px 及以上) */
@media (min-width: 992px) {
    .grid-cols-lg-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-lg-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-lg-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-cols-lg-6 { grid-template-columns: repeat(6, 1fr); }
}

/* 超大屏幕 (超大桌面显示器, 1200px 及以上) */
@media (min-width: 1200px) {
    .grid-cols-xl-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-xl-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-xl-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-xl-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-cols-xl-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-cols-xl-6 { grid-template-columns: repeat(6, 1fr); }
    .grid-cols-xl-7 { grid-template-columns: repeat(7, 1fr); }
    .grid-cols-xl-8 { grid-template-columns: repeat(8, 1fr); }
}

/* 行样式 - 用于包裹列，创建flex容器 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem; /* 负外边距，抵消列的内边距，确保边缘对齐 */
    margin-left: -0.75rem;
}

/* 基础列样式 - 控制列之间的间距 */
.col {
    flex: 1 0 0%;
    padding-right: 0.5rem; /* 右侧间距 */
    padding-left: 0.5rem; /* 左侧间距 */
    margin-bottom: 1rem; /* 底部间距，控制上下列之间的距离 */
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* 超小屏幕 (xs) - 默认不使用媒体查询，适用于 <576px */
.col-1 { width: 8.3333333333%; }
.col-2 { width: 16.6666666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.3333333333%; }
.col-5 { width: 41.6666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333333333%; }
.col-8 { width: 66.6666666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333333333%; }
.col-11 { width: 91.6666666667%; }
.col-12 { width: 100%; }

/* 小屏幕 (sm) - ≥576px */
@media (min-width: 576px) {
    .col-sm-1 { width: 8.3333333333%; }
    .col-sm-2 { width: 16.6666666667%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.3333333333%; }
    .col-sm-5 { width: 41.6666666667%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.3333333333%; }
    .col-sm-8 { width: 66.6666666667%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.3333333333%; }
    .col-sm-11 { width: 91.6666666667%; }
    .col-sm-12 { width: 100%; }
}

/* 中等屏幕 (md) - ≥768px */
@media (min-width: 768px) {
    .col-md-1 { width: 8.3333333333%; }
    .col-md-2 { width: 16.6666666667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.3333333333%; }
    .col-md-5 { width: 41.6666666667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.3333333333%; }
    .col-md-8 { width: 66.6666666667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.3333333333%; }
    .col-md-11 { width: 91.6666666667%; }
    .col-md-12 { width: 100%; }
}

/* 大屏幕 (lg) - ≥992px */
@media (min-width: 992px) {
    .col-lg-1 { width: 8.3333333333%; }
    .col-lg-2 { width: 16.6666666667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.3333333333%; }
    .col-lg-5 { width: 41.6666666667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.3333333333%; }
    .col-lg-8 { width: 66.6666666667%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.3333333333%; }
    .col-lg-11 { width: 91.6666666667%; }
    .col-lg-12 { width: 100%; }
}

/* 超大屏幕 (xl) - ≥1200px */
@media (min-width: 1200px) {
    .col-xl-1 { width: 8.3333333333%; }
    .col-xl-2 { width: 16.6666666667%; }
    .col-xl-3 { width: 25%; }
    .col-xl-4 { width: 33.3333333333%; }
    .col-xl-5 { width: 41.6666666667%; }
    .col-xl-6 { width: 50%; }
    .col-xl-7 { width: 58.3333333333%; }
    .col-xl-8 { width: 66.6666666667%; }
    .col-xl-9 { width: 75%; }
    .col-xl-10 { width: 83.3333333333%; }
    .col-xl-11 { width: 91.6666666667%; }
    .col-xl-12 { width: 100%; }
}

/* 特大屏幕 (xxl) - ≥1400px */
@media (min-width: 1400px) {
    .col-xxl-1 { width: 8.3333333333%; }
    .col-xxl-2 { width: 16.6666666667%; }
    .col-xxl-3 { width: 25%; }
    .col-xxl-4 { width: 33.3333333333%; }
    .col-xxl-5 { width: 41.6666666667%; }
    .col-xxl-6 { width: 50%; }
    .col-xxl-7 { width: 58.3333333333%; }
    .col-xxl-8 { width: 66.6666666667%; }
    .col-xxl-9 { width: 75%; }
    .col-xxl-10 { width: 83.3333333333%; }
    .col-xxl-11 { width: 91.6666666667%; }
    .col-xxl-12 { width: 100%; }
}



/* 文字溢出隐藏类 */
.row-1-hidden {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-2-hidden {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}