.container{
  max-width: 900px;
  margin: 0 auto;
}

.row{
  display: flex;
  align-items: center;
  margin: 20px;
}

.col-1{
    width: 8.333333333333333%;
}
.col-2{
    width: 16.6666666666666%;
}
.col-3{
    width: 25%;
}
.col-4{
    width: 33.3333333333%;
}
.col-5{
    width: 41.6666666667%;
}
.col-6{
    width: 50%;
}
.col-7{
    width: 58.3333333333%;
}
.col-8{
    width: 66.6666666667%;
}
.col-9{
    width: 75%;
}
.col-10{
    width: 83.3333333333%;
}
.col-11{
    width: 91.6666666667;
}
.col-12{
    width: 100%;
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.co-l2{
  padding: 10px;
}

@media (max-width: 900px) {
  .row{
    display: inherit;
    text-align: center;
  }
    .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.co-l2{
    width: 100%;
  {
}