.col12 {
  width: 100%;
  max-width: 100%;
  display: inline-block;
}

.col12 {
  width: 100%;
  max-width: 100%;
}

.col12.c0 {
  width: auto;
  max-width: auto;
}

.col12.c1 {
  width: 8%;
  max-width: 8%;
}

.col12.c2 {
  width: 16%;
  max-width: 16%;
}

.col12.c3 {
  width: 25%;
  max-width: 25%;
}

.col12.c4 {
  width: 33%;
  max-width: 33%;
}

.col12.c5 {
  width: 41%;
  max-width: 41%;
}

.col12.c6 {
  width: 50%;
  max-width: 50%;
}

.col12.c7 {
  width: 58%;
  max-width: 58%;
}

.col12.c8 {
  width: 66%;
  max-width: 66%;
}

.col12.c9 {
  width: 75%;
  max-width: 75%;
}

.col12.c10 {
  width: 83%;
  max-width: 83%;
}

.col12.c11 {
  width: 91%;
  max-width: 91%;
}

@media screen and (max-width: 961px) {
  .col12.c1,
  .col12.c2,
  .col12.c3,
  .col12.c4,
  .col12.c5,
  .col12.c6 {
    width: 50%;
    max-width: 50%;
  }
  .col12.c7,
  .col12.c8,
  .col12.c9,
  .col12.c10,
  .col12.c11 {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .col12.c1,
  .col12.c2,
  .col12.c3,
  .col12.c4,
  .col12.c5,
  .col12.c6,
  .col12.c7,
  .col12.c8,
  .col12.c9,
  .col12.c10,
  .col12.c11 {
    width: 100%;
    max-width: 100%;
  }
}