/**
 * 生存战争网 - 响应式网格系统
 * 12 列栅格布局，支持移动(col-mb-)、平板(col-tb-)、桌面(col-)三种断点
 * 断点: <768px 移动端, >=768px 平板, >=992px 桌面
 */

/* ===== 容器（全设备） ===== */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

/* ===== 行容器 ===== */
.row {
    margin-right: -10px;
    margin-left: -10px;
    display: flex;
    flex-wrap: wrap;
}

.row > [class*="col-"] {
    float: left;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

/* ===== 移动端列 (col-mb-) ===== */
.col-mb-1 { width: 8.33333%; }
.col-mb-2 { width: 16.66667%; }
.col-mb-3 { width: 25%; }
.col-mb-4 { width: 33.33333%; }
.col-mb-5 { width: 41.66667%; }
.col-mb-6 { width: 50%; }
.col-mb-7 { width: 58.33333%; }
.col-mb-8 { width: 66.66667%; }
.col-mb-9 { width: 75%; }
.col-mb-10 { width: 83.33333%; }
.col-mb-11 { width: 91.66667%; }
.col-mb-12 { width: 100%; }

/* ===== 平板端断点 (>=768px) ===== */
@media (min-width: 768px) {
    .container { max-width: 728px; }
    .col-tb-1 { width: 8.33333%; }
    .col-tb-2 { width: 16.66667%; }
    .col-tb-3 { width: 25%; }
    .col-tb-4 { width: 33.33333%; }
    .col-tb-5 { width: 41.66667%; }
    .col-tb-6 { width: 50%; }
    .col-tb-7 { width: 58.33333%; }
    .col-tb-8 { width: 66.66667%; }
    .col-tb-9 { width: 75%; }
    .col-tb-10 { width: 83.33333%; }
    .col-tb-11 { width: 91.66667%; }
    .col-tb-12 { width: 100%; }
}

/* ===== 桌面端断点 (>=992px) ===== */
@media (min-width: 992px) {
    .container { max-width: 940px; }
    .col-1 { width: 8.33333%; }
    .col-2 { width: 16.66667%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33333%; }
    .col-5 { width: 41.66667%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33333%; }
    .col-8 { width: 66.66667%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33333%; }
    .col-11 { width: 91.66667%; }
    .col-12 { width: 100%; }
}