.row {
    display: flex;
    flex-wrap: wrap;
    --gap-size: 0rem;
}

.row.gap-2 { --gap-size: 0.5rem; }
.row.gap-3 { --gap-size: 0.75rem; }
.row.gap-4 { --gap-size: 1rem; }
.row.gap-5 { --gap-size: 2.25rem; }

.row.gap-2, .row.gap-3, .row.gap-4, .row.gap-5 {
    margin: 0 calc(-.5 * var(--gap-size));
}

.row  > * {
    padding: 0 calc(var(--gap-size) * .5);    
}

.col-1 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 8.333333%;
}

.col-2 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 16.666667%;
}

.col-3 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 33.333333%;
}

.col-5 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 41.666667%;
}

.col-6 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 58.333333%;
}

.col-8 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 66.666667%;
}

.col-9 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 83.333333%;
}

.col-11 {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 91.666667%;
}

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

.col {
    flex: 1;
    box-sizing: border-box;
}

@media (max-width: 991px) {
  .row {
    display: block;
    margin: 0;
  }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex: 0 0 100%;
    width: 100%;
  }
}