* {
    margin: 0;
    padding: 0;
}
html{
    /* 自訂屬性變數 數值 */
    --col-gap:15px;   
}
.container{
    /* max-width: 1200px; */
    margin: auto;
    /* 使用變數 */
    padding-left: var(--col-gap);
    padding-right: var(--col-gap);
}
.row{
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid salmon; */
    /* 扣掉多餘的寬度 */
    /* margin-left: calc(var(--col-gap) * -1);
    margin-right: calc(var(--col-gap) * -1); */
    margin: calc(var(--col-gap) * -1);
}
[class*="col-"]{
    width: calc(100% / 12 * var(--col-num));
}
[class*="col-"],
[class*="row-cols-"] > .col {
    box-sizing: border-box;
    padding: var(--col-gap);
    
}

/* 設定子層 */
.col-1{--col-num:1;}
.col-2{--col-num:2;}
.col-3{--col-num:3;}
.col-4{--col-num:4;}
.col-5{--col-num:5;}
.col-6{--col-num:6;}
.col-7{--col-num:7;}
.col-8{--col-num:8;}
.col-9{--col-num:9;}
.col-10{--col-num:10;}
.col-11{--col-num:11;}
.col-12{--col-num:12;}

@media screen and (min-width:768px) {
    .col-md-1{--col-num:1;}
    .col-md-2{--col-num:2;}
    .col-md-3{--col-num:3;}
    .col-md-4{--col-num:4;}
    .col-md-5{--col-num:5;}
    .col-md-6{--col-num:6;}
    .col-md-7{--col-num:7;}
    .col-md-8{--col-num:8;}
    .col-md-9{--col-num:9;}
    .col-md-10{--col-num:10;}
    .col-md-11{--col-num:11;}
    .col-md-12{--col-num:12;}
}

@media screen and (min-width:1024px) {
    .col-lg-1{--col-num:1;}
    .col-lg-2{--col-num:2;}
    .col-lg-3{--col-num:3;}
    .col-lg-4{--col-num:4;}
    .col-lg-5{--col-num:5;}
    .col-lg-6{--col-num:6;}
    .col-lg-7{--col-num:7;}
    .col-lg-8{--col-num:8;}
    .col-lg-9{--col-num:9;}
    .col-lg-10{--col-num:10;}
    .col-lg-11{--col-num:11;}
    .col-lg-12{--col-num:12;}
}

@media screen and (min-width:1200px) {
    .col-xl-1{--col-num:1;}
    .col-xl-2{--col-num:2;}
    .col-xl-3{--col-num:3;}
    .col-xl-4{--col-num:4;}
    .col-xl-5{--col-num:5;}
    .col-xl-6{--col-num:6;}
    .col-xl-7{--col-num:7;}
    .col-xl-8{--col-num:8;}
    .col-xl-9{--col-num:9;}
    .col-xl-10{--col-num:10;}
    .col-xl-11{--col-num:11;}
    .col-xl-12{--col-num:12;}
}

/* 設定父層 */
.row-cols-1 > .col{width: 100%;}
.row-cols-2 > .col{width: 50%;}
.row-cols-3 > .col{width: 33.333333%;}
.row-cols-4 > .col{width: 25%;}
.row-cols-5 > .col{width: 20%;}
.row-cols-6 > .col{width: 16.666666%;}

@media screen and (min-width:768px) {
    .row-cols-md-1 > .col{width: 100%;}
    .row-cols-md-2 > .col{width: 50%;}
    .row-cols-md-3 > .col{width: 33.333333%;}
    .row-cols-md-4 > .col{width: 25%;}
    .row-cols-md-5 > .col{width: 20%;}
    .row-cols-md-6 > .col{width: 16.666666%;}
}

@media screen and (min-width:1024px) {
    .row-cols-lg-1 > .col{width: 100%;}
    .row-cols-lg-2 > .col{width: 50%;}
    .row-cols-lg-3 > .col{width: 33.333333%;}
    .row-cols-lg-4 > .col{width: 25%;}
    .row-cols-lg-5 > .col{width: 20%;}
    .row-cols-lg-6 > .col{width: 16.666666%;}
}

@media screen and (min-width:1200px) {
    .row-cols-xl-1 > .col{width: 100%;}
    .row-cols-xl-2 > .col{width: 50%;}
    .row-cols-xl-3 > .col{width: 33.333333%;}
    .row-cols-xl-4 > .col{width: 25%;}
    .row-cols-xl-5 > .col{width: 20%;}
    .row-cols-xl-6 > .col{width: 16.666666%;}
}