/**
    Title: flex-layout.css
    Author: Professor Krasso
    Date: 2/4/2021
    Description: Styling to build a reusable flex layout; inspired by Bootstrap and Angular FlexLayout
    Sources:
        Bootstrap: https://github.com/twbs/bootstrap
        Angular FlexLayout: https://github.com/angular/flex-layout
 */

 :root {
    --col-1: 8.33%;
    --col-2: 16.66%;
    --col-3: 25%;
    --col-4: 33.33%;
    --col-5: 41.66%;
    --col-6: 50%;
    --col-7: 58.33%;
    --col-8: 66.66%;
    --col-9: 75%;
    --col-10: 83.33%;
    --col-11: 91.66%;
    --col-12: 100%;
}

.container {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.row {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
}

.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 auto;
    padding-right: .5rem;
    padding-left: .5rem;
}

.col-1 { width: var(--col-1); }
.col-2 { width: var(--col-2); }
.col-3 { width: var(--col-3); }
.col-4 { width: var(--col-4); }
.col-5 { width: var(--col-5); }
.col-6 { width: var(--col-6); }
.col-7 { width: var(--col-7); }
.col-8 { width: var(--col-8); }
.col-9 { width: var(--col-9); }
.col-10 { width: var(--col-10); }
.col-11 { width: var(--col-11); }
.col-12 { width: var(--col-12); }