.flex-grid {
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.flex-grid > * {
  box-sizing: border-box;
}

.flex-grid.g-l-fullsize {
  margin: 0 -1rem;
}

.flex-grid.g-l-centering {
  justify-content: space-around;
}

.flex-grid.g-l-float {
  display: block;
  overflow: hidden;
}

/* grid */
.g-s-1 {
  width: 8.33334%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-2 {
  width: 16.66668%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-3 {
  width: 25.00001%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-4 {
  width: 33.33334%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-5 {
  width: 41.66668%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-6 {
  width: 50.00001%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-7 {
  width: 58.33334%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-8 {
  width: 66.66668%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-9 {
  width: 75.00001%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-10 {
  width: 83.33334%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-11 {
  width: 91.66668%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

.g-s-12 {
  width: 100.00001%;
  padding: 0 1rem;
  display: block;
  word-wrap: break-word;
}

@media (min-width: 768px) {
  .g-m-1 {
    width: 8.33334%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-2 {
    width: 16.66668%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-3 {
    width: 25.00001%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-4 {
    width: 33.33334%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-5 {
    width: 41.66668%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-6 {
    width: 50.00001%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-7 {
    width: 58.33334%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-8 {
    width: 66.66668%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-9 {
    width: 75.00001%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-10 {
    width: 83.33334%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-11 {
    width: 91.66668%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-m-12 {
    width: 100.00001%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
}

@media (min-width: 992px) {
  .g-l-1 {
    width: 8.33334%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-2 {
    width: 16.66668%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-3 {
    width: 25.00001%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-4 {
    width: 33.33334%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-5 {
    width: 41.66668%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-6 {
    width: 50.00001%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-7 {
    width: 58.33334%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-8 {
    width: 66.66668%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-9 {
    width: 75.00001%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-10 {
    width: 83.33334%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-11 {
    width: 91.66668%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
  .g-l-12 {
    width: 100.00001%;
    padding: 0 1rem;
    display: block;
    word-wrap: break-word;
  }
}

/* skip */
@media (max-width: 767px) {
  .g-s-skip-1 {
    margin-left: 8.33333%;
  }
  .g-s-skip-2 {
    margin-left: 16.66667%;
  }
  .g-s-skip-3 {
    margin-left: 25%;
  }
  .g-s-skip-4 {
    margin-left: 33.33333%;
  }
  .g-s-skip-5 {
    margin-left: 41.66667%;
  }
  .g-s-skip-6 {
    margin-left: 50%;
  }
  .g-s-skip-7 {
    margin-left: 58.33333%;
  }
  .g-s-skip-8 {
    margin-left: 66.66667%;
  }
  .g-s-skip-9 {
    margin-left: 75%;
  }
  .g-s-skip-10 {
    margin-left: 83.33333%;
  }
  .g-s-skip-11 {
    margin-left: 91.66667%;
  }
  .g-s-skip-12 {
    margin-left: 100%;
  }
}

@media (min-width: 768px) {
  .g-m-skip-1 {
    margin-left: 8.33333%;
  }
  .g-m-skip-2 {
    margin-left: 16.66667%;
  }
  .g-m-skip-3 {
    margin-left: 25%;
  }
  .g-m-skip-4 {
    margin-left: 33.33333%;
  }
  .g-m-skip-5 {
    margin-left: 41.66667%;
  }
  .g-m-skip-6 {
    margin-left: 50%;
  }
  .g-m-skip-7 {
    margin-left: 58.33333%;
  }
  .g-m-skip-8 {
    margin-left: 66.66667%;
  }
  .g-m-skip-9 {
    margin-left: 75%;
  }
  .g-m-skip-10 {
    margin-left: 83.33333%;
  }
  .g-m-skip-11 {
    margin-left: 91.66667%;
  }
  .g-m-skip-12 {
    margin-left: 100%;
  }
}

@media (min-width: 992px) {
  .g-l-skip-1 {
    margin-left: 8.33333%;
  }
  .g-l-skip-2 {
    margin-left: 16.66667%;
  }
  .g-l-skip-3 {
    margin-left: 25%;
  }
  .g-l-skip-4 {
    margin-left: 33.33333%;
  }
  .g-l-skip-5 {
    margin-left: 41.66667%;
  }
  .g-l-skip-6 {
    margin-left: 50%;
  }
  .g-l-skip-7 {
    margin-left: 58.33333%;
  }
  .g-l-skip-8 {
    margin-left: 66.66667%;
  }
  .g-l-skip-9 {
    margin-left: 75%;
  }
  .g-l-skip-10 {
    margin-left: 83.33333%;
  }
  .g-l-skip-11 {
    margin-left: 91.66667%;
  }
  .g-l-skip-12 {
    margin-left: 100%;
  }
}

/* mat style */
.g-l-mat {
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
}

.g-l-mat .g-l-mat-innter {
  margin: 0;
  padding: 0 0.5rem;
  flex: 1 0 auto;
}

@media (min-width: 768px) {
  .g-l-mat {
    padding: 0 1rem;
  }
  .g-l-mat .g-l-mat-innter {
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
  }
}

/* oder */
.g-s-oder-pull-0, .g-m-oder-pull-0, .g-l-oder-pull-0 {
  order: 0;
}

.g-s-oder-push-0, .g-m-oder-push-0, .g-l-oder-push-0 {
  order: 0;
}

.g-s-oder-pull-1, .g-m-oder-pull-1, .g-l-oder-pull-1 {
  order: -1;
}

.g-s-oder-push-1, .g-m-oder-push-1, .g-l-oder-push-1 {
  order: 1;
}

.g-s-oder-pull-2, .g-m-oder-pull-2, .g-l-oder-pull-2 {
  order: -2;
}

.g-s-oder-push-2, .g-m-oder-push-2, .g-l-oder-push-2 {
  order: 2;
}

.g-s-oder-pull-3, .g-m-oder-pull-3, .g-l-oder-pull-3 {
  order: -3;
}

.g-s-oder-push-3, .g-m-oder-push-3, .g-l-oder-push-3 {
  order: 3;
}

.g-s-oder-pull-4, .g-m-oder-pull-4, .g-l-oder-pull-4 {
  order: -4;
}

.g-s-oder-push-4, .g-m-oder-push-4, .g-l-oder-push-4 {
  order: 4;
}

.g-s-oder-pull-5, .g-m-oder-pull-5, .g-l-oder-pull-5 {
  order: -5;
}

.g-s-oder-push-5, .g-m-oder-push-5, .g-l-oder-push-5 {
  order: 5;
}

/* float */
.g-l-float .g-s-1, .g-l-float .g-m-1, .g-l-float .g-l-1 {
  float: left;
}

.g-l-float .g-s-1.is-right, .g-l-float .g-m-1.is-right, .g-l-float .g-l-1.is-right {
  float: right;
}

.g-l-float .g-s-2, .g-l-float .g-m-2, .g-l-float .g-l-2 {
  float: left;
}

.g-l-float .g-s-2.is-right, .g-l-float .g-m-2.is-right, .g-l-float .g-l-2.is-right {
  float: right;
}

.g-l-float .g-s-3, .g-l-float .g-m-3, .g-l-float .g-l-3 {
  float: left;
}

.g-l-float .g-s-3.is-right, .g-l-float .g-m-3.is-right, .g-l-float .g-l-3.is-right {
  float: right;
}

.g-l-float .g-s-4, .g-l-float .g-m-4, .g-l-float .g-l-4 {
  float: left;
}

.g-l-float .g-s-4.is-right, .g-l-float .g-m-4.is-right, .g-l-float .g-l-4.is-right {
  float: right;
}

.g-l-float .g-s-5, .g-l-float .g-m-5, .g-l-float .g-l-5 {
  float: left;
}

.g-l-float .g-s-5.is-right, .g-l-float .g-m-5.is-right, .g-l-float .g-l-5.is-right {
  float: right;
}

.g-l-float .g-s-6, .g-l-float .g-m-6, .g-l-float .g-l-6 {
  float: left;
}

.g-l-float .g-s-6.is-right, .g-l-float .g-m-6.is-right, .g-l-float .g-l-6.is-right {
  float: right;
}

.g-l-float .g-s-7, .g-l-float .g-m-7, .g-l-float .g-l-7 {
  float: left;
}

.g-l-float .g-s-7.is-right, .g-l-float .g-m-7.is-right, .g-l-float .g-l-7.is-right {
  float: right;
}

.g-l-float .g-s-8, .g-l-float .g-m-8, .g-l-float .g-l-8 {
  float: left;
}

.g-l-float .g-s-8.is-right, .g-l-float .g-m-8.is-right, .g-l-float .g-l-8.is-right {
  float: right;
}

.g-l-float .g-s-9, .g-l-float .g-m-9, .g-l-float .g-l-9 {
  float: left;
}

.g-l-float .g-s-9.is-right, .g-l-float .g-m-9.is-right, .g-l-float .g-l-9.is-right {
  float: right;
}

.g-l-float .g-s-10, .g-l-float .g-m-10, .g-l-float .g-l-10 {
  float: left;
}

.g-l-float .g-s-10.is-right, .g-l-float .g-m-10.is-right, .g-l-float .g-l-10.is-right {
  float: right;
}

.g-l-float .g-s-11, .g-l-float .g-m-11, .g-l-float .g-l-11 {
  float: left;
}

.g-l-float .g-s-11.is-right, .g-l-float .g-m-11.is-right, .g-l-float .g-l-11.is-right {
  float: right;
}

.g-l-float .g-s-12, .g-l-float .g-m-12, .g-l-float .g-l-12 {
  float: left;
}

.g-l-float .g-s-12.is-right, .g-l-float .g-m-12.is-right, .g-l-float .g-l-12.is-right {
  float: right;
}