.container {
  margin: 0 20px;
}

.center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-1 {
  width: (100% / 12);
}

.col-2 {
  width: (100% / 6);
}

.col-3 {
  width: (100% / 4);
}

.col-4 {
  width: (100% / 3);
}

.col-5 {
  width: (100% / (12 / 5));
}

.col-6 {
  width: (100% / 2);
}

.col-7 {
  width: (100% / (12 / 7));
}

.col-8 {
  width: (100% / (12 / 8));
}

.col-9 {
  width: (100% / (12 / 9));
}

.col-10 {
  width: (100% / (12 / 10));
}

.col-11 {
  width: (100% / (12 / 11));
}

.col-12 {
  width: 100%;
}

@media screen and (max-width: $breakpoint-s) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    width: 100%;
  }
}