.container {
    width: 100%;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
}

.row.center {
    align-items: center;
}

.col {
    padding: 0 15px;
}

.col-12 { flex: 0 0 100%; }
.col-11 { flex: 0 0 calc(100% / 12 * 11); }
.col-10 { flex: 0 0 calc(100% / 12 * 10); }
.col-9  { flex: 0 0 calc(100% / 12 * 9); }
.col-8  { flex: 0 0 calc(100% / 12 * 8); }
.col-7  { flex: 0 0 calc(100% / 12 * 7); }
.col-6  { flex: 0 0 calc(100% / 12 * 6); }
.col-5  { flex: 0 0 calc(100% / 12 * 5); }
.col-4  { flex: 0 0 calc(100% / 12 * 4); }
.col-3  { flex: 0 0 calc(100% / 12 * 3); }
.col-2  { flex: 0 0 calc(100% / 12 * 2); }
.col-1  { flex: 0 0 calc(100% / 12 * 1); }

@media (min-width: 576px) {
    .container { width: 540px; }

    .col-sm-12 { flex: 0 0 100%; }
    .col-sm-11 { flex: 0 0 calc(100% / 12 * 11); }
    .col-sm-10 { flex: 0 0 calc(100% / 12 * 10); }
    .col-sm-9  { flex: 0 0 calc(100% / 12 * 9); }
    .col-sm-8  { flex: 0 0 calc(100% / 12 * 8); }
    .col-sm-7  { flex: 0 0 calc(100% / 12 * 7); }
    .col-sm-6  { flex: 0 0 calc(100% / 12 * 6); }
    .col-sm-5  { flex: 0 0 calc(100% / 12 * 5); }
    .col-sm-4  { flex: 0 0 calc(100% / 12 * 4); }
    .col-sm-3  { flex: 0 0 calc(100% / 12 * 3); }
    .col-sm-2  { flex: 0 0 calc(100% / 12 * 2); }
    .col-sm-1  { flex: 0 0 calc(100% / 12 * 1); }
}

@media (min-width: 768px) {
    .container { width: 720px; }

    .col-md-12 { flex: 0 0 100%; }
    .col-md-11 { flex: 0 0 calc(100% / 12 * 11); }
    .col-md-10 { flex: 0 0 calc(100% / 12 * 10); }
    .col-md-9  { flex: 0 0 calc(100% / 12 * 9); }
    .col-md-8  { flex: 0 0 calc(100% / 12 * 8); }
    .col-md-7  { flex: 0 0 calc(100% / 12 * 7); }
    .col-md-6  { flex: 0 0 calc(100% / 12 * 6); }
    .col-md-5  { flex: 0 0 calc(100% / 12 * 5); }
    .col-md-4  { flex: 0 0 calc(100% / 12 * 4); }
    .col-md-3  { flex: 0 0 calc(100% / 12 * 3); }
    .col-md-2  { flex: 0 0 calc(100% / 12 * 2); }
    .col-md-1  { flex: 0 0 calc(100% / 12 * 1); }
}

@media (min-width: 992px) {
    .container { width: 960px; }

    .col-lg-12 { flex: 0 0 100%; }
    .col-lg-11 { flex: 0 0 calc(100% / 12 * 11); }
    .col-lg-10 { flex: 0 0 calc(100% / 12 * 10); }
    .col-lg-9  { flex: 0 0 calc(100% / 12 * 9); }
    .col-lg-8  { flex: 0 0 calc(100% / 12 * 8); }
    .col-lg-7  { flex: 0 0 calc(100% / 12 * 7); }
    .col-lg-6  { flex: 0 0 calc(100% / 12 * 6); }
    .col-lg-5  { flex: 0 0 calc(100% / 12 * 5); }
    .col-lg-4  { flex: 0 0 calc(100% / 12 * 4); }
    .col-lg-3  { flex: 0 0 calc(100% / 12 * 3); }
    .col-lg-2  { flex: 0 0 calc(100% / 12 * 2); }
    .col-lg-1  { flex: 0 0 calc(100% / 12 * 1); }
}

@media (min-width: 1200px) {
    .container { width: 1140px; }

    .col-xl-12 { flex: 0 0 100%; }
    .col-xl-11 { flex: 0 0 calc(100% / 12 * 11); }
    .col-xl-10 { flex: 0 0 calc(100% / 12 * 10); }
    .col-xl-9  { flex: 0 0 calc(100% / 12 * 9); }
    .col-xl-8  { flex: 0 0 calc(100% / 12 * 8); }
    .col-xl-7  { flex: 0 0 calc(100% / 12 * 7); }
    .col-xl-6  { flex: 0 0 calc(100% / 12 * 6); }
    .col-xl-5  { flex: 0 0 calc(100% / 12 * 5); }
    .col-xl-4  { flex: 0 0 calc(100% / 12 * 4); }
    .col-xl-3  { flex: 0 0 calc(100% / 12 * 3); }
    .col-xl-2  { flex: 0 0 calc(100% / 12 * 2); }
    .col-xl-1  { flex: 0 0 calc(100% / 12 * 1); }
}

@media (min-width: 1400px) {
    .container { width: 1320px; }

    .col-xxl-12 { flex: 0 0 100%; }
    .col-xxl-11 { flex: 0 0 calc(100% / 12 * 11); }
    .col-xxl-10 { flex: 0 0 calc(100% / 12 * 10); }
    .col-xxl-9  { flex: 0 0 calc(100% / 12 * 9); }
    .col-xxl-8  { flex: 0 0 calc(100% / 12 * 8); }
    .col-xxl-7  { flex: 0 0 calc(100% / 12 * 7); }
    .col-xxl-6  { flex: 0 0 calc(100% / 12 * 6); }
    .col-xxl-5  { flex: 0 0 calc(100% / 12 * 5); }
    .col-xxl-4  { flex: 0 0 calc(100% / 12 * 4); }
    .col-xxl-3  { flex: 0 0 calc(100% / 12 * 3); }
    .col-xxl-2  { flex: 0 0 calc(100% / 12 * 2); }
    .col-xxl-1  { flex: 0 0 calc(100% / 12 * 1); }
}