.col {
  height: 100px;
  width: 50%;
  padding: 0 10px;
  border: 1px solid red;
}
.col.col-1 {
  width: 4.1666666667%;
}
.col.col-2 {
  width: 8.3333333333%;
}
.col.col-3 {
  width: 12.5%;
}
.col.col-4 {
  width: 16.6666666667%;
}
.col.col-5 {
  width: 20.8333333333%;
}
.col.col-6 {
  width: 25%;
}
.col.col-7 {
  width: 29.1666666667%;
}
.col.col-8 {
  width: 33.3333333333%;
}
.col.col-9 {
  width: 37.5%;
}
.col.col-10 {
  width: 41.6666666667%;
}
.col.col-11 {
  width: 45.8333333333%;
}
.col.col-12 {
  width: 50%;
}
.col.col-13 {
  width: 54.1666666667%;
}
.col.col-14 {
  width: 58.3333333333%;
}
.col.col-15 {
  width: 62.5%;
}
.col.col-16 {
  width: 66.6666666667%;
}
.col.col-17 {
  width: 70.8333333333%;
}
.col.col-18 {
  width: 75%;
}
.col.col-19 {
  width: 79.1666666667%;
}
.col.col-20 {
  width: 83.3333333333%;
}
.col.col-21 {
  width: 87.5%;
}
.col.col-22 {
  width: 91.6666666667%;
}
.col.col-23 {
  width: 95.8333333333%;
}
.col.col-24 {
  width: 100%;
}
.col.offset-1 {
  margin-left: 4.1666666667%;
}
.col.offset-2 {
  margin-left: 8.3333333333%;
}
.col.offset-3 {
  margin-left: 12.5%;
}
.col.offset-4 {
  margin-left: 16.6666666667%;
}
.col.offset-5 {
  margin-left: 20.8333333333%;
}
.col.offset-6 {
  margin-left: 25%;
}
.col.offset-7 {
  margin-left: 29.1666666667%;
}
.col.offset-8 {
  margin-left: 33.3333333333%;
}
.col.offset-9 {
  margin-left: 37.5%;
}
.col.offset-10 {
  margin-left: 41.6666666667%;
}
.col.offset-11 {
  margin-left: 45.8333333333%;
}
.col.offset-12 {
  margin-left: 50%;
}
.col.offset-13 {
  margin-left: 54.1666666667%;
}
.col.offset-14 {
  margin-left: 58.3333333333%;
}
.col.offset-15 {
  margin-left: 62.5%;
}
.col.offset-16 {
  margin-left: 66.6666666667%;
}
.col.offset-17 {
  margin-left: 70.8333333333%;
}
.col.offset-18 {
  margin-left: 75%;
}
.col.offset-19 {
  margin-left: 79.1666666667%;
}
.col.offset-20 {
  margin-left: 83.3333333333%;
}
.col.offset-21 {
  margin-left: 87.5%;
}
.col.offset-22 {
  margin-left: 91.6666666667%;
}
.col.offset-23 {
  margin-left: 95.8333333333%;
}
.col.offset-24 {
  margin-left: 100%;
}
@media (min-width: 577px) {
  .col.col-ipad-1 {
    width: 4.1666666667%;
  }
  .col.col-ipad-2 {
    width: 8.3333333333%;
  }
  .col.col-ipad-3 {
    width: 12.5%;
  }
  .col.col-ipad-4 {
    width: 16.6666666667%;
  }
  .col.col-ipad-5 {
    width: 20.8333333333%;
  }
  .col.col-ipad-6 {
    width: 25%;
  }
  .col.col-ipad-7 {
    width: 29.1666666667%;
  }
  .col.col-ipad-8 {
    width: 33.3333333333%;
  }
  .col.col-ipad-9 {
    width: 37.5%;
  }
  .col.col-ipad-10 {
    width: 41.6666666667%;
  }
  .col.col-ipad-11 {
    width: 45.8333333333%;
  }
  .col.col-ipad-12 {
    width: 50%;
  }
  .col.col-ipad-13 {
    width: 54.1666666667%;
  }
  .col.col-ipad-14 {
    width: 58.3333333333%;
  }
  .col.col-ipad-15 {
    width: 62.5%;
  }
  .col.col-ipad-16 {
    width: 66.6666666667%;
  }
  .col.col-ipad-17 {
    width: 70.8333333333%;
  }
  .col.col-ipad-18 {
    width: 75%;
  }
  .col.col-ipad-19 {
    width: 79.1666666667%;
  }
  .col.col-ipad-20 {
    width: 83.3333333333%;
  }
  .col.col-ipad-21 {
    width: 87.5%;
  }
  .col.col-ipad-22 {
    width: 91.6666666667%;
  }
  .col.col-ipad-23 {
    width: 95.8333333333%;
  }
  .col.col-ipad-24 {
    width: 100%;
  }
  .col.offset-ipad-1 {
    margin-left: 4.1666666667%;
  }
  .col.offset-ipad-2 {
    margin-left: 8.3333333333%;
  }
  .col.offset-ipad-3 {
    margin-left: 12.5%;
  }
  .col.offset-ipad-4 {
    margin-left: 16.6666666667%;
  }
  .col.offset-ipad-5 {
    margin-left: 20.8333333333%;
  }
  .col.offset-ipad-6 {
    margin-left: 25%;
  }
  .col.offset-ipad-7 {
    margin-left: 29.1666666667%;
  }
  .col.offset-ipad-8 {
    margin-left: 33.3333333333%;
  }
  .col.offset-ipad-9 {
    margin-left: 37.5%;
  }
  .col.offset-ipad-10 {
    margin-left: 41.6666666667%;
  }
  .col.offset-ipad-11 {
    margin-left: 45.8333333333%;
  }
  .col.offset-ipad-12 {
    margin-left: 50%;
  }
  .col.offset-ipad-13 {
    margin-left: 54.1666666667%;
  }
  .col.offset-ipad-14 {
    margin-left: 58.3333333333%;
  }
  .col.offset-ipad-15 {
    margin-left: 62.5%;
  }
  .col.offset-ipad-16 {
    margin-left: 66.6666666667%;
  }
  .col.offset-ipad-17 {
    margin-left: 70.8333333333%;
  }
  .col.offset-ipad-18 {
    margin-left: 75%;
  }
  .col.offset-ipad-19 {
    margin-left: 79.1666666667%;
  }
  .col.offset-ipad-20 {
    margin-left: 83.3333333333%;
  }
  .col.offset-ipad-21 {
    margin-left: 87.5%;
  }
  .col.offset-ipad-22 {
    margin-left: 91.6666666667%;
  }
  .col.offset-ipad-23 {
    margin-left: 95.8333333333%;
  }
  .col.offset-ipad-24 {
    margin-left: 100%;
  }
}
@media (min-width: 769px) {
  .col.col-narrowPc-1 {
    width: 4.1666666667%;
  }
  .col.col-narrowPc-2 {
    width: 8.3333333333%;
  }
  .col.col-narrowPc-3 {
    width: 12.5%;
  }
  .col.col-narrowPc-4 {
    width: 16.6666666667%;
  }
  .col.col-narrowPc-5 {
    width: 20.8333333333%;
  }
  .col.col-narrowPc-6 {
    width: 25%;
  }
  .col.col-narrowPc-7 {
    width: 29.1666666667%;
  }
  .col.col-narrowPc-8 {
    width: 33.3333333333%;
  }
  .col.col-narrowPc-9 {
    width: 37.5%;
  }
  .col.col-narrowPc-10 {
    width: 41.6666666667%;
  }
  .col.col-narrowPc-11 {
    width: 45.8333333333%;
  }
  .col.col-narrowPc-12 {
    width: 50%;
  }
  .col.col-narrowPc-13 {
    width: 54.1666666667%;
  }
  .col.col-narrowPc-14 {
    width: 58.3333333333%;
  }
  .col.col-narrowPc-15 {
    width: 62.5%;
  }
  .col.col-narrowPc-16 {
    width: 66.6666666667%;
  }
  .col.col-narrowPc-17 {
    width: 70.8333333333%;
  }
  .col.col-narrowPc-18 {
    width: 75%;
  }
  .col.col-narrowPc-19 {
    width: 79.1666666667%;
  }
  .col.col-narrowPc-20 {
    width: 83.3333333333%;
  }
  .col.col-narrowPc-21 {
    width: 87.5%;
  }
  .col.col-narrowPc-22 {
    width: 91.6666666667%;
  }
  .col.col-narrowPc-23 {
    width: 95.8333333333%;
  }
  .col.col-narrowPc-24 {
    width: 100%;
  }
  .col.offset-narrowPc-1 {
    margin-left: 4.1666666667%;
  }
  .col.offset-narrowPc-2 {
    margin-left: 8.3333333333%;
  }
  .col.offset-narrowPc-3 {
    margin-left: 12.5%;
  }
  .col.offset-narrowPc-4 {
    margin-left: 16.6666666667%;
  }
  .col.offset-narrowPc-5 {
    margin-left: 20.8333333333%;
  }
  .col.offset-narrowPc-6 {
    margin-left: 25%;
  }
  .col.offset-narrowPc-7 {
    margin-left: 29.1666666667%;
  }
  .col.offset-narrowPc-8 {
    margin-left: 33.3333333333%;
  }
  .col.offset-narrowPc-9 {
    margin-left: 37.5%;
  }
  .col.offset-narrowPc-10 {
    margin-left: 41.6666666667%;
  }
  .col.offset-narrowPc-11 {
    margin-left: 45.8333333333%;
  }
  .col.offset-narrowPc-12 {
    margin-left: 50%;
  }
  .col.offset-narrowPc-13 {
    margin-left: 54.1666666667%;
  }
  .col.offset-narrowPc-14 {
    margin-left: 58.3333333333%;
  }
  .col.offset-narrowPc-15 {
    margin-left: 62.5%;
  }
  .col.offset-narrowPc-16 {
    margin-left: 66.6666666667%;
  }
  .col.offset-narrowPc-17 {
    margin-left: 70.8333333333%;
  }
  .col.offset-narrowPc-18 {
    margin-left: 75%;
  }
  .col.offset-narrowPc-19 {
    margin-left: 79.1666666667%;
  }
  .col.offset-narrowPc-20 {
    margin-left: 83.3333333333%;
  }
  .col.offset-narrowPc-21 {
    margin-left: 87.5%;
  }
  .col.offset-narrowPc-22 {
    margin-left: 91.6666666667%;
  }
  .col.offset-narrowPc-23 {
    margin-left: 95.8333333333%;
  }
  .col.offset-narrowPc-24 {
    margin-left: 100%;
  }
}
@media (min-width: 993px) {
  .col.col-pc-1 {
    width: 4.1666666667%;
  }
  .col.col-pc-2 {
    width: 8.3333333333%;
  }
  .col.col-pc-3 {
    width: 12.5%;
  }
  .col.col-pc-4 {
    width: 16.6666666667%;
  }
  .col.col-pc-5 {
    width: 20.8333333333%;
  }
  .col.col-pc-6 {
    width: 25%;
  }
  .col.col-pc-7 {
    width: 29.1666666667%;
  }
  .col.col-pc-8 {
    width: 33.3333333333%;
  }
  .col.col-pc-9 {
    width: 37.5%;
  }
  .col.col-pc-10 {
    width: 41.6666666667%;
  }
  .col.col-pc-11 {
    width: 45.8333333333%;
  }
  .col.col-pc-12 {
    width: 50%;
  }
  .col.col-pc-13 {
    width: 54.1666666667%;
  }
  .col.col-pc-14 {
    width: 58.3333333333%;
  }
  .col.col-pc-15 {
    width: 62.5%;
  }
  .col.col-pc-16 {
    width: 66.6666666667%;
  }
  .col.col-pc-17 {
    width: 70.8333333333%;
  }
  .col.col-pc-18 {
    width: 75%;
  }
  .col.col-pc-19 {
    width: 79.1666666667%;
  }
  .col.col-pc-20 {
    width: 83.3333333333%;
  }
  .col.col-pc-21 {
    width: 87.5%;
  }
  .col.col-pc-22 {
    width: 91.6666666667%;
  }
  .col.col-pc-23 {
    width: 95.8333333333%;
  }
  .col.col-pc-24 {
    width: 100%;
  }
  .col.offset-pc-1 {
    margin-left: 4.1666666667%;
  }
  .col.offset-pc-2 {
    margin-left: 8.3333333333%;
  }
  .col.offset-pc-3 {
    margin-left: 12.5%;
  }
  .col.offset-pc-4 {
    margin-left: 16.6666666667%;
  }
  .col.offset-pc-5 {
    margin-left: 20.8333333333%;
  }
  .col.offset-pc-6 {
    margin-left: 25%;
  }
  .col.offset-pc-7 {
    margin-left: 29.1666666667%;
  }
  .col.offset-pc-8 {
    margin-left: 33.3333333333%;
  }
  .col.offset-pc-9 {
    margin-left: 37.5%;
  }
  .col.offset-pc-10 {
    margin-left: 41.6666666667%;
  }
  .col.offset-pc-11 {
    margin-left: 45.8333333333%;
  }
  .col.offset-pc-12 {
    margin-left: 50%;
  }
  .col.offset-pc-13 {
    margin-left: 54.1666666667%;
  }
  .col.offset-pc-14 {
    margin-left: 58.3333333333%;
  }
  .col.offset-pc-15 {
    margin-left: 62.5%;
  }
  .col.offset-pc-16 {
    margin-left: 66.6666666667%;
  }
  .col.offset-pc-17 {
    margin-left: 70.8333333333%;
  }
  .col.offset-pc-18 {
    margin-left: 75%;
  }
  .col.offset-pc-19 {
    margin-left: 79.1666666667%;
  }
  .col.offset-pc-20 {
    margin-left: 83.3333333333%;
  }
  .col.offset-pc-21 {
    margin-left: 87.5%;
  }
  .col.offset-pc-22 {
    margin-left: 91.6666666667%;
  }
  .col.offset-pc-23 {
    margin-left: 95.8333333333%;
  }
  .col.offset-pc-24 {
    margin-left: 100%;
  }
}
@media (min-width: 1201px) {
  .col.col-wide-pc-1 {
    width: 4.1666666667%;
  }
  .col.col-wide-pc-2 {
    width: 8.3333333333%;
  }
  .col.col-wide-pc-3 {
    width: 12.5%;
  }
  .col.col-wide-pc-4 {
    width: 16.6666666667%;
  }
  .col.col-wide-pc-5 {
    width: 20.8333333333%;
  }
  .col.col-wide-pc-6 {
    width: 25%;
  }
  .col.col-wide-pc-7 {
    width: 29.1666666667%;
  }
  .col.col-wide-pc-8 {
    width: 33.3333333333%;
  }
  .col.col-wide-pc-9 {
    width: 37.5%;
  }
  .col.col-wide-pc-10 {
    width: 41.6666666667%;
  }
  .col.col-wide-pc-11 {
    width: 45.8333333333%;
  }
  .col.col-wide-pc-12 {
    width: 50%;
  }
  .col.col-wide-pc-13 {
    width: 54.1666666667%;
  }
  .col.col-wide-pc-14 {
    width: 58.3333333333%;
  }
  .col.col-wide-pc-15 {
    width: 62.5%;
  }
  .col.col-wide-pc-16 {
    width: 66.6666666667%;
  }
  .col.col-wide-pc-17 {
    width: 70.8333333333%;
  }
  .col.col-wide-pc-18 {
    width: 75%;
  }
  .col.col-wide-pc-19 {
    width: 79.1666666667%;
  }
  .col.col-wide-pc-20 {
    width: 83.3333333333%;
  }
  .col.col-wide-pc-21 {
    width: 87.5%;
  }
  .col.col-wide-pc-22 {
    width: 91.6666666667%;
  }
  .col.col-wide-pc-23 {
    width: 95.8333333333%;
  }
  .col.col-wide-pc-24 {
    width: 100%;
  }
  .col.offset-wide-pc-1 {
    margin-left: 4.1666666667%;
  }
  .col.offset-wide-pc-2 {
    margin-left: 8.3333333333%;
  }
  .col.offset-wide-pc-3 {
    margin-left: 12.5%;
  }
  .col.offset-wide-pc-4 {
    margin-left: 16.6666666667%;
  }
  .col.offset-wide-pc-5 {
    margin-left: 20.8333333333%;
  }
  .col.offset-wide-pc-6 {
    margin-left: 25%;
  }
  .col.offset-wide-pc-7 {
    margin-left: 29.1666666667%;
  }
  .col.offset-wide-pc-8 {
    margin-left: 33.3333333333%;
  }
  .col.offset-wide-pc-9 {
    margin-left: 37.5%;
  }
  .col.offset-wide-pc-10 {
    margin-left: 41.6666666667%;
  }
  .col.offset-wide-pc-11 {
    margin-left: 45.8333333333%;
  }
  .col.offset-wide-pc-12 {
    margin-left: 50%;
  }
  .col.offset-wide-pc-13 {
    margin-left: 54.1666666667%;
  }
  .col.offset-wide-pc-14 {
    margin-left: 58.3333333333%;
  }
  .col.offset-wide-pc-15 {
    margin-left: 62.5%;
  }
  .col.offset-wide-pc-16 {
    margin-left: 66.6666666667%;
  }
  .col.offset-wide-pc-17 {
    margin-left: 70.8333333333%;
  }
  .col.offset-wide-pc-18 {
    margin-left: 75%;
  }
  .col.offset-wide-pc-19 {
    margin-left: 79.1666666667%;
  }
  .col.offset-wide-pc-20 {
    margin-left: 83.3333333333%;
  }
  .col.offset-wide-pc-21 {
    margin-left: 87.5%;
  }
  .col.offset-wide-pc-22 {
    margin-left: 91.6666666667%;
  }
  .col.offset-wide-pc-23 {
    margin-left: 95.8333333333%;
  }
  .col.offset-wide-pc-24 {
    margin-left: 100%;
  }
}