/**
  Grid
  ----
  A simple CSS grid using SASS and flexbox

  Classes you can use in your row to adjust columns (*)
    no-gutter  -> Remove the defined gap ($grid-gutter)
    left       -> Align items on left (if the number of columns is minor than $grid-cols)
    left-BP    -> Align items on left only while in the breakpoint BP
    center     -> Align items on center (if the number of columns is minor than $grid-cols)
    center-BP  -> Align items on center only while in the breakpoint BP
    right      -> Align items on right (if the number of columns is minor than $grid-cols)
    right-BP   -> Align items on right only while in the breakpoint BP
    between    -> Space between items (if the number of columns is minor than $grid-cols)
    between-BP -> Space between items only while in the breakpoint BP
    around     -> Space around items (if the number of columns is minor than $grid-cols)
    around-BP  -> Space around items only while in the breakpoint BP

  Classes you can use in your columns (*)
    col           -> Create a resizable column; if you use this class for all columns, they will have equal widths
    col-N         -> Creates an element covering N columns of $grid-cols
    col-N-BP      -> Creates an element covering N columns of $grid-cols only while in the breakpoint BP
    col-0         -> Hide the column
    col-0-BP      -> Hide the column only while in the breakpoint BP
    order-ON      -> Defines the property order to ON
    order-ON-BP   -> Defines the property order to ON only while in the breakpoint BP
    auto-width    -> The column width will fit it's content
    auto-width-BP -> The column width will fit it's content only while in the breakpoint BP

  * "N" is a number from zero to $grid-cols
  * "BP" is the breakpoint name (one of the indexes on $breakpoints map or $breakpoint-beyond)
  * "ON" is the number to set property "order"

  Breakpoints
  Our breakpoints are exclusionary. The rules set for some size will not be overwritten by the next one.
  Each breakpoint value sets the upper bound of a range from the last processed value (or zero
  for the first value). So, since it excludes any width beyond the last breakpoint, there is another breakpoint
  name, defined in $breakpoint-beyond which will be valid from the last defined breakpoint plus 1px.
  That's why we need the values in $breakpoints to be sorted in ascending order. Implicitly $breakpoints
  starts from zero and the added breakpoint includes every width greater than the last value.
*/
.container {
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  max-width: 1200px;
  min-width: 120px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  gap: 0%;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.row > *.col {
  box-sizing: border-box;
  height: auto;
  display: initial;
  flex-basis: 0;
  max-width: 100%;
}
.row > * {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.row .order-1 {
  order: 1;
}
.row .order-2 {
  order: 2;
}
.row .order-3 {
  order: 3;
}
.row .order-4 {
  order: 4;
}
.row .order-5 {
  order: 5;
}
.row .order-6 {
  order: 6;
}
.row .order-7 {
  order: 7;
}
.row .order-8 {
  order: 8;
}
.row .order-9 {
  order: 9;
}
.row .order-10 {
  order: 10;
}
.row .order-11 {
  order: 11;
}
.row .order-12 {
  order: 12;
}
.row.left {
  justify-content: flex-start;
}
.row.center {
  justify-content: center;
}
.row.right {
  justify-content: flex-end;
}
.row.between {
  justify-content: space-between;
}
.row.around {
  justify-content: space-around;
}
.row .col-0 {
  display: none;
}
.row .auto-width {
  flex: 0 0 auto;
}
.row .col-1 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 8.3333%;
  flex-basis: 8.3333%;
}
.row .offset-1 {
  margin-left: 8.3333%;
}
.row .col-2 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 16.6667%;
  flex-basis: 16.6667%;
}
.row .offset-2 {
  margin-left: 16.6667%;
}
.row .col-3 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 25%;
  flex-basis: 25%;
}
.row .offset-3 {
  margin-left: 25%;
}
.row .col-4 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 33.3333%;
  flex-basis: 33.3333%;
}
.row .offset-4 {
  margin-left: 33.3333%;
}
.row .col-5 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 41.6667%;
  flex-basis: 41.6667%;
}
.row .offset-5 {
  margin-left: 41.6667%;
}
.row .col-6 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 50%;
  flex-basis: 50%;
}
.row .offset-6 {
  margin-left: 50%;
}
.row .col-7 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 58.3333%;
  flex-basis: 58.3333%;
}
.row .offset-7 {
  margin-left: 58.3333%;
}
.row .col-8 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 66.6667%;
  flex-basis: 66.6667%;
}
.row .offset-8 {
  margin-left: 66.6667%;
}
.row .col-9 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 75%;
  flex-basis: 75%;
}
.row .offset-9 {
  margin-left: 75%;
}
.row .col-10 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 83.3333%;
  flex-basis: 83.3333%;
}
.row .offset-10 {
  margin-left: 83.3333%;
}
.row .col-11 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 91.6667%;
  flex-basis: 91.6667%;
}
.row .offset-11 {
  margin-left: 91.6667%;
}
.row .col-12 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 100%;
  flex-basis: 100%;
}
@media only screen and (max-width: 1200px) {
  .row.left-mobile {
    justify-content: flex-start;
  }
  .row.center-mobile {
    justify-content: center;
  }
  .row.right-mobile {
    justify-content: flex-end;
  }
  .row.between-mobile {
    justify-content: space-between;
  }
  .row.around-mobile {
    justify-content: space-around;
  }
  .row .order-1-mobile {
    order: 1;
  }
  .row .order-2-mobile {
    order: 2;
  }
  .row .order-3-mobile {
    order: 3;
  }
  .row .order-4-mobile {
    order: 4;
  }
  .row .order-5-mobile {
    order: 5;
  }
  .row .order-6-mobile {
    order: 6;
  }
  .row .order-7-mobile {
    order: 7;
  }
  .row .order-8-mobile {
    order: 8;
  }
  .row .order-9-mobile {
    order: 9;
  }
  .row .order-10-mobile {
    order: 10;
  }
  .row .order-11-mobile {
    order: 11;
  }
  .row .order-12-mobile {
    order: 12;
  }
  .row .col-0-mobile {
    display: none;
  }
  .row .auto-width-mobile {
    flex: 0 0 auto;
  }
  .row .col-1-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 8.3333%;
    flex-basis: 8.3333%;
  }
  .row .offset-1-mobile {
    margin-left: 8.3333%;
  }
  .row .col-2-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 16.6667%;
    flex-basis: 16.6667%;
  }
  .row .offset-2-mobile {
    margin-left: 16.6667%;
  }
  .row .col-3-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 25%;
    flex-basis: 25%;
  }
  .row .offset-3-mobile {
    margin-left: 25%;
  }
  .row .col-4-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 33.3333%;
    flex-basis: 33.3333%;
  }
  .row .offset-4-mobile {
    margin-left: 33.3333%;
  }
  .row .col-5-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 41.6667%;
    flex-basis: 41.6667%;
  }
  .row .offset-5-mobile {
    margin-left: 41.6667%;
  }
  .row .col-6-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 50%;
    flex-basis: 50%;
  }
  .row .offset-6-mobile {
    margin-left: 50%;
  }
  .row .col-7-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 58.3333%;
    flex-basis: 58.3333%;
  }
  .row .offset-7-mobile {
    margin-left: 58.3333%;
  }
  .row .col-8-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 66.6667%;
    flex-basis: 66.6667%;
  }
  .row .offset-8-mobile {
    margin-left: 66.6667%;
  }
  .row .col-9-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 75%;
    flex-basis: 75%;
  }
  .row .offset-9-mobile {
    margin-left: 75%;
  }
  .row .col-10-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 83.3333%;
    flex-basis: 83.3333%;
  }
  .row .offset-10-mobile {
    margin-left: 83.3333%;
  }
  .row .col-11-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 91.6667%;
    flex-basis: 91.6667%;
  }
  .row .offset-11-mobile {
    margin-left: 91.6667%;
  }
  .row .col-12-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 100%;
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1201px) {
  .row.left-desktop {
    justify-content: flex-start;
  }
  .row.center-desktop {
    justify-content: center;
  }
  .row.right-desktop {
    justify-content: flex-end;
  }
  .row.between-desktop {
    justify-content: space-between;
  }
  .row.around-desktop {
    justify-content: space-around;
  }
  .row .order-1-desktop {
    order: 1;
  }
  .row .order-2-desktop {
    order: 2;
  }
  .row .order-3-desktop {
    order: 3;
  }
  .row .order-4-desktop {
    order: 4;
  }
  .row .order-5-desktop {
    order: 5;
  }
  .row .order-6-desktop {
    order: 6;
  }
  .row .order-7-desktop {
    order: 7;
  }
  .row .order-8-desktop {
    order: 8;
  }
  .row .order-9-desktop {
    order: 9;
  }
  .row .order-10-desktop {
    order: 10;
  }
  .row .order-11-desktop {
    order: 11;
  }
  .row .order-12-desktop {
    order: 12;
  }
  .row .col-0-desktop {
    display: none;
  }
  .row .auto-width-desktop {
    flex: 0 0 auto;
  }
  .row .col-1-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 8.3333%;
    flex-basis: 8.3333%;
  }
  .row .offset-1-desktop {
    margin-left: 8.3333%;
  }
  .row .col-2-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 16.6667%;
    flex-basis: 16.6667%;
  }
  .row .offset-2-desktop {
    margin-left: 16.6667%;
  }
  .row .col-3-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 25%;
    flex-basis: 25%;
  }
  .row .offset-3-desktop {
    margin-left: 25%;
  }
  .row .col-4-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 33.3333%;
    flex-basis: 33.3333%;
  }
  .row .offset-4-desktop {
    margin-left: 33.3333%;
  }
  .row .col-5-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 41.6667%;
    flex-basis: 41.6667%;
  }
  .row .offset-5-desktop {
    margin-left: 41.6667%;
  }
  .row .col-6-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 50%;
    flex-basis: 50%;
  }
  .row .offset-6-desktop {
    margin-left: 50%;
  }
  .row .col-7-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 58.3333%;
    flex-basis: 58.3333%;
  }
  .row .offset-7-desktop {
    margin-left: 58.3333%;
  }
  .row .col-8-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 66.6667%;
    flex-basis: 66.6667%;
  }
  .row .offset-8-desktop {
    margin-left: 66.6667%;
  }
  .row .col-9-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 75%;
    flex-basis: 75%;
  }
  .row .offset-9-desktop {
    margin-left: 75%;
  }
  .row .col-10-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 83.3333%;
    flex-basis: 83.3333%;
  }
  .row .offset-10-desktop {
    margin-left: 83.3333%;
  }
  .row .col-11-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 91.6667%;
    flex-basis: 91.6667%;
  }
  .row .offset-11-desktop {
    margin-left: 91.6667%;
  }
  .row .col-12-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 100%;
    flex-basis: 100%;
  }
}
.row.no-gutter {
  gap: 0%;
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutter > * {
  padding-left: 0;
  padding-right: 0;
}
.row.no-gutter .col-0 {
  display: none;
}
.row.no-gutter .auto-width {
  flex: 0 0 auto;
}
.row.no-gutter .col-1 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 8.3333%;
  flex-basis: 8.3333%;
}
.row.no-gutter .offset-1 {
  margin-left: 8.3333%;
}
.row.no-gutter .col-2 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 16.6667%;
  flex-basis: 16.6667%;
}
.row.no-gutter .offset-2 {
  margin-left: 16.6667%;
}
.row.no-gutter .col-3 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 25%;
  flex-basis: 25%;
}
.row.no-gutter .offset-3 {
  margin-left: 25%;
}
.row.no-gutter .col-4 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 33.3333%;
  flex-basis: 33.3333%;
}
.row.no-gutter .offset-4 {
  margin-left: 33.3333%;
}
.row.no-gutter .col-5 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 41.6667%;
  flex-basis: 41.6667%;
}
.row.no-gutter .offset-5 {
  margin-left: 41.6667%;
}
.row.no-gutter .col-6 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 50%;
  flex-basis: 50%;
}
.row.no-gutter .offset-6 {
  margin-left: 50%;
}
.row.no-gutter .col-7 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 58.3333%;
  flex-basis: 58.3333%;
}
.row.no-gutter .offset-7 {
  margin-left: 58.3333%;
}
.row.no-gutter .col-8 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 66.6667%;
  flex-basis: 66.6667%;
}
.row.no-gutter .offset-8 {
  margin-left: 66.6667%;
}
.row.no-gutter .col-9 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 75%;
  flex-basis: 75%;
}
.row.no-gutter .offset-9 {
  margin-left: 75%;
}
.row.no-gutter .col-10 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 83.3333%;
  flex-basis: 83.3333%;
}
.row.no-gutter .offset-10 {
  margin-left: 83.3333%;
}
.row.no-gutter .col-11 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 91.6667%;
  flex-basis: 91.6667%;
}
.row.no-gutter .offset-11 {
  margin-left: 91.6667%;
}
.row.no-gutter .col-12 {
  box-sizing: border-box;
  height: auto;
  display: initial;
  width: 100%;
  flex-basis: 100%;
}
@media only screen and (max-width: 1200px) {
  .row.no-gutter .col-0-mobile {
    display: none;
  }
  .row.no-gutter .auto-width-mobile {
    flex: 0 0 auto;
  }
  .row.no-gutter .col-1-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 8.3333%;
    flex-basis: 8.3333%;
  }
  .row.no-gutter .offset-1-mobile {
    margin-left: 8.3333%;
  }
  .row.no-gutter .col-2-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 16.6667%;
    flex-basis: 16.6667%;
  }
  .row.no-gutter .offset-2-mobile {
    margin-left: 16.6667%;
  }
  .row.no-gutter .col-3-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 25%;
    flex-basis: 25%;
  }
  .row.no-gutter .offset-3-mobile {
    margin-left: 25%;
  }
  .row.no-gutter .col-4-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 33.3333%;
    flex-basis: 33.3333%;
  }
  .row.no-gutter .offset-4-mobile {
    margin-left: 33.3333%;
  }
  .row.no-gutter .col-5-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 41.6667%;
    flex-basis: 41.6667%;
  }
  .row.no-gutter .offset-5-mobile {
    margin-left: 41.6667%;
  }
  .row.no-gutter .col-6-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 50%;
    flex-basis: 50%;
  }
  .row.no-gutter .offset-6-mobile {
    margin-left: 50%;
  }
  .row.no-gutter .col-7-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 58.3333%;
    flex-basis: 58.3333%;
  }
  .row.no-gutter .offset-7-mobile {
    margin-left: 58.3333%;
  }
  .row.no-gutter .col-8-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 66.6667%;
    flex-basis: 66.6667%;
  }
  .row.no-gutter .offset-8-mobile {
    margin-left: 66.6667%;
  }
  .row.no-gutter .col-9-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 75%;
    flex-basis: 75%;
  }
  .row.no-gutter .offset-9-mobile {
    margin-left: 75%;
  }
  .row.no-gutter .col-10-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 83.3333%;
    flex-basis: 83.3333%;
  }
  .row.no-gutter .offset-10-mobile {
    margin-left: 83.3333%;
  }
  .row.no-gutter .col-11-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 91.6667%;
    flex-basis: 91.6667%;
  }
  .row.no-gutter .offset-11-mobile {
    margin-left: 91.6667%;
  }
  .row.no-gutter .col-12-mobile {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 100%;
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 1201px) {
  .row.no-gutter .col-0-desktop {
    display: none;
  }
  .row.no-gutter .auto-width-desktop {
    flex: 0 0 auto;
  }
  .row.no-gutter .col-1-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 8.3333%;
    flex-basis: 8.3333%;
  }
  .row.no-gutter .offset-1-desktop {
    margin-left: 8.3333%;
  }
  .row.no-gutter .col-2-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 16.6667%;
    flex-basis: 16.6667%;
  }
  .row.no-gutter .offset-2-desktop {
    margin-left: 16.6667%;
  }
  .row.no-gutter .col-3-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 25%;
    flex-basis: 25%;
  }
  .row.no-gutter .offset-3-desktop {
    margin-left: 25%;
  }
  .row.no-gutter .col-4-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 33.3333%;
    flex-basis: 33.3333%;
  }
  .row.no-gutter .offset-4-desktop {
    margin-left: 33.3333%;
  }
  .row.no-gutter .col-5-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 41.6667%;
    flex-basis: 41.6667%;
  }
  .row.no-gutter .offset-5-desktop {
    margin-left: 41.6667%;
  }
  .row.no-gutter .col-6-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 50%;
    flex-basis: 50%;
  }
  .row.no-gutter .offset-6-desktop {
    margin-left: 50%;
  }
  .row.no-gutter .col-7-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 58.3333%;
    flex-basis: 58.3333%;
  }
  .row.no-gutter .offset-7-desktop {
    margin-left: 58.3333%;
  }
  .row.no-gutter .col-8-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 66.6667%;
    flex-basis: 66.6667%;
  }
  .row.no-gutter .offset-8-desktop {
    margin-left: 66.6667%;
  }
  .row.no-gutter .col-9-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 75%;
    flex-basis: 75%;
  }
  .row.no-gutter .offset-9-desktop {
    margin-left: 75%;
  }
  .row.no-gutter .col-10-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 83.3333%;
    flex-basis: 83.3333%;
  }
  .row.no-gutter .offset-10-desktop {
    margin-left: 83.3333%;
  }
  .row.no-gutter .col-11-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 91.6667%;
    flex-basis: 91.6667%;
  }
  .row.no-gutter .offset-11-desktop {
    margin-left: 91.6667%;
  }
  .row.no-gutter .col-12-desktop {
    box-sizing: border-box;
    height: auto;
    display: initial;
    width: 100%;
    flex-basis: 100%;
  }
}

/*# sourceMappingURL=grid.css.map */