.wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.grid {
  margin: 0 -15px;
  width: calc(100% + 30px);
}

.grid:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}

.grid [class*='col-'] {
  padding: 0 15px;
  float: left;
}

.grid .col-1 {
  width: 8.33%;
}

.grid .col-2 {
  width: 16.66%;
}

.grid .col-3 {
  width: 25%;
}

.grid .col-4 {
  width: 33.33%;
}

.grid .col-5 {
  width: 41.66%;
}

.grid .col-6 {
  width: 50%;
}

.grid .col-7 {
  width: 58.33%;
}

.grid .col-8 {
  width: 66.66%;
}

.grid .col-9 {
  width: 75%;
}

.grid .col-10 {
  width: 83.33%;
}

.grid .col-11 {
  width: 91.66%;
}

.grid .col-12 {
  width: 100%;
}

@media screen and (max-width: 800px) {
  .grid .col-1 {
    width: 16.66%;
  }
  .grid .col-2 {
    width: 33.33%;
  }
  .grid .col-3 {
    width: 50%;
  }
  .grid .col-4 {
    width: 100%;
  }
  .grid .col-5 {
    width: 100%;
  }
  .grid .col-6 {
    width: 100%;
  }
  .grid .col-7 {
    width: 100%;
  }
  .grid .col-8 {
    width: 100%;
  }
  .grid .col-9 {
    width: 100%;
  }
  .grid .col-10 {
    width: 100%;
  }
  .grid .col-11 {
    width: 100%;
  }
  .grid .col-12 {
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
  .grid .col-1 {
    width: 100%;
  }
  .grid .col-2 {
    width: 100%;
  }
  .grid .col-3 {
    width: 100%;
  }
  .grid .col-4 {
    width: 100%;
  }
  .grid .col-5 {
    width: 100%;
    word-break: break-word;
  }
  .grid .col-6 {
    width: 100%;
  }
  .grid .col-7 {
    width: 100%;
  }
  .grid .col-8 {
    width: 100%;
  }
  .grid .col-9 {
    width: 100%;
  }
  .grid .col-10 {
    width: 100%;
  }
  .grid .col-11 {
    width: 100%;
  }
  .grid .col-12 {
    width: 100%;
  }
}
/*# sourceMappingURL=grid.css.map */