/* basic grid utility */

.grid-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
}

.grid-container.fluid {
    max-width: none;
}

.grid-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.grid-col {
    box-sizing: border-box;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    flex: 0 0 100%;
    max-width: 100%;
}

/* 12 column widths */
.col-1  { flex-basis: 8.3333%;  max-width: 8.3333%; }
.col-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
.col-3  { flex-basis: 25%;      max-width: 25%; }
.col-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
.col-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
.col-6  { flex-basis: 50%;      max-width: 50%; }
.col-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
.col-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
.col-9  { flex-basis: 75%;      max-width: 75%; }
.col-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.col-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
.col-12 { flex-basis: 100%;     max-width: 100%; }

/* tablet up */
@media (min-width: 640px) {
    .col-md-3  { flex-basis: 25%;      max-width: 25%; }
    .col-md-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
    .col-md-6  { flex-basis: 50%;      max-width: 50%; }
    .col-md-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
    .col-md-12 { flex-basis: 100%;     max-width: 100%; }
}

/* desktop up */
@media (min-width: 1024px) {
    .col-lg-3  { flex-basis: 25%;      max-width: 25%; }
    .col-lg-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
    .col-lg-6  { flex-basis: 50%;      max-width: 50%; }
    .col-lg-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
    .col-lg-12 { flex-basis: 100%;     max-width: 100%; }
}