/**
    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: 0.5rem;
  padding-left: 0.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);
}