.row {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
}

.row.padded > * {
   padding: 20px;
}

.row.padded-small > * {
   padding: 2px 8px;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11 {
   flex-grow: 0;
   flex-shrink: 0;
   box-sizing: border-box;
}

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

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

.col-3 {
   width: 25%;
   flex-basis: 25%;
}

.col-4 {
   width: 33%;
   flex-basis: 33%;
}

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

.col-6 {
   width: 50%;
   flex-basis: 50%;
}

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

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

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

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

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

.col-12 {
   width: 100%;
   flex-basis: 100%;
   box-sizing: border-box;
}

.cell {
   margin: auto;
}

@media screen and (max-width: 450px) {
   .col-1,
   .col-2,
   .col-3,
   .col-4,
   .col-5,
   .col-6,
   .col-7,
   .col-8,
   .col-9,
   .col-10,
   .col-11 {
      width: 100%;
      flex-basis: 100%;
   }
}

.justify-center {
   justify-content: center;
}