.outer {
  width: 100%;
}

.container {
  max-width: 1140px;
  padding: 0 16px;
  margin: auto;

  &.\-\-left {
    text-align: left;
  }
}

.wrapper {
  position: relative;

  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }

  margin: {
    left: -16px;
    right: -16px;
  }
}

.col-1, .col-2, .col-3, .col-3x2, .col-4, .col-4x2, .col-4x3, .col-5, .col-5x2, .col-5x3, .col-5x4, .col-6, .col-6x2, .col-6x3, .col-6x4, .col-6x5, .col-7, .col-7x2, .col-7x3, .col-7x4, .col-7x5, .col-7x6, .col-8, .col-8x2, .col-8x3, .col-8x4, .col-8x5, .col-8x6, .col-8x7 {
  float: left;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;

  &.\-\-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
}

// mixin column size
@mixin colsize($col) {
  width: percentage(1/$col);
}
// mixin column size extended
// ex; col-5x3 : col-CxN
@mixin colsize-x($C,$N) {
  width: (math.div(100, $C) * $N)*1%;
}
@mixin colspansize-x($C,$N) {
  margin-left: (math.div(100, $C) * $N)*1%;
}

.col {

  &-3x2 {
    @include colsize-x(3,2);
  }

  &-4x2 {
    @include colsize-x(4,2);
  }
  &-4x3 {
    @include colsize-x(4,3);
  }

  &-5x2 {
    @include colsize-x(5,2);
  }
  &-5x3 {
    @include colsize-x(5,3);
  }
  &-5x4 {
    @include colsize-x(5,4);
  }

  &-6x2 {
    @include colsize-x(6,2);
  }
  &-6x3 {
    @include colsize-x(6,3);
  }
  &-6x4 {
    @include colsize-x(6,4);
  }
  &-6x5 {
    @include colsize-x(6,5);
  }

  &-7 {
    @include colsize-x(7,1);
  }
  &-7x2 {
    @include colsize-x(7,2);
  }
  &-7x3 {
    @include colsize-x(7,3);
  }
  &-7x4 {
    @include colsize-x(7,4);
  }
  &-7x5 {
    @include colsize-x(7,5);
  }
  &-7x6 {
    @include colsize-x(7,6);
  }

  &-8x2 {
    @include colsize-x(8,2);
  }
  &-8x3 {
    @include colsize-x(8,3);
  }
  &-8x4 {
    @include colsize-x(8,4);
  }
  &-8x5 {
    @include colsize-x(8,5);
  }
  &-8x6 {
    @include colsize-x(8,6);
  }
  &-8x7 {
    @include colsize-x(8,7);
  }

}
.col-span {

  &-3x2 {
    @include colspansize-x(3,2);
  }

  &-4x2 {
    @include colspansize-x(4,2);
  }
  &-4x3 {
    @include colspansize-x(4,3);
  }

  &-5x2 {
    @include colspansize-x(5,2);
  }
  &-5x3 {
    @include colspansize-x(5,3);
  }
  &-5x4 {
    @include colspansize-x(5,4);
  }

  &-6x2 {
    @include colspansize-x(6,2);
  }
  &-6x3 {
    @include colspansize-x(6,3);
  }
  &-6x4 {
    @include colspansize-x(6,4);
  }
  &-6x5 {
    @include colspansize-x(6,5);
  }

  &-7 {
    @include colspansize-x(7,1);
  }
  &-7x2 {
    @include colspansize-x(7,2);
  }
  &-7x3 {
    @include colspansize-x(7,3);
  }
  &-7x4 {
    @include colspansize-x(7,4);
  }
  &-7x5 {
    @include colspansize-x(7,5);
  }
  &-7x6 {
    @include colspansize-x(7,6);
  }

  &-8x2 {
    @include colspansize-x(8,2);
  }
  &-8x3 {
    @include colspansize-x(8,3);
  }
  &-8x4 {
    @include colspansize-x(8,4);
  }
  &-8x5 {
    @include colspansize-x(8,5);
  }
  &-8x6 {
    @include colspansize-x(8,6);
  }
  &-8x7 {
    @include colspansize-x(8,7);
  }

}


/* GENERATE COLS BASIC */
$cols: 8;
@for $i from $cols through 1 {
  .col-#{$i} {
    width: (math.div(100, $i))*1%;
  }
}

$colspan: 8;
@for $i from $colspan through 1 {
  .col-span-#{$i} {
    margin-left: (math.div(100, $i))*1%;
  }
}

@media only screen and (max-width: 769px) {
  .outer {
    width: 100%;
  }

  .container {
    min-width: 320px;

    &.\-\-big {
      max-width: unset;
      min-width: 320px;
    }
  }

  .col-1, .col-2, .col-3, .col-3x2, .col-4, .col-4x2, .col-4x3, .col-5, .col-5x2, .col-5x3, .col-5x4, .col-6, .col-6x2, .col-6x3, .col-6x4, .col-6x5, .col-7, .col-7x2, .col-7x3, .col-7x4, .col-7x5, .col-7x6, .col-8, .col-8x2, .col-8x3, .col-8x4, .col-8x5, .col-8x6, .col-8x7 {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .col-span-1, .col-span-2, .col-span-3, .col-span-3x2, .col-span-4, .col-span-4x2, .col-span-4x3, .col-span-5, .col-span-5x2, .col-span-5x3, .col-span-5x4, .col-span-6, .col-span-6x2, .col-span-6x3, .col-span-6x4, .col-span-6x5, .col-span-7, .col-span-7x2, .col-span-7x3, .col-span-7x4, .col-span-7x5, .col-span-7x6, .col-span-8, .col-span-8x2, .col-span-8x3, .col-span-8x4, .col-span-8x5, .col-span-8x6, .col-span-8x7 {
    margin: 0;
  }
}