/* ========================================================= */
/* Layout                                                    */
/* ========================================================= */

.container { margin-left: auto; margin-right: auto; max-width: 75rem; }
.columns { display: flex; flex-wrap: wrap; margin-left: calc(0em - var(--gutter)); margin-right: calc(0em - var(--gutter)); }
.justifyCenter { justify-content: center; }
.justifyEvenly { justify-content: space-evenly; }
.justifyBetween { justify-content: space-between; }
.justifyStart { justify-content: start; }
.justifyEnd { justify-content: flex-end; }
.alignStart { align-items: flex-start; }
.alignCenter { align-items: center; }
.alignEnd { align-items: flex-end; }
.flex1 { flex: 1; }
.flexColumn { flex-direction: column; }
.flexRow { flex-direction: row; }
.flexWrap { flex-wrap: wrap; }
.flexWrapReverse { flex-wrap: wrap-reverse; }
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col1Fifth { padding-left: var(--gutter); padding-right: var(--gutter); }
.colAuto { width: auto; }
.col1 { width: calc(1 / 12 * 100%); }
.col2 { width: calc(2 / 12 * 100%); }
.col3 { width: calc(3 / 12 * 100%); }
.col4 { width: calc(4 / 12 * 100%); }
.col5 { width: calc(5 / 12 * 100%); }
.col6 { width: calc(6 / 12 * 100%); }
.col7 { width: calc(7 / 12 * 100%); }
.col8 { width: calc(8 / 12 * 100%); }
.col9 { width: calc(9 / 12 * 100%); }
.col10 { width: calc(10 / 12 * 100%); }
.col11 { width: calc(11 / 12 * 100%); }
.col12 { width: calc(12 / 12 * 100%); }
.col1Fifth { width: calc(1 / 5 * 100%); }
.grid { display: grid; }
.grid1Col { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid2Col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3Col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4Col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid5Col { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid6Col { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.spanAllCols { grid-column: 1/-1; }

@media (min-width: 30em) {
  .sm-justifyCenter { justify-content: center; }
  .sm-justifyEvenly { justify-content: space-evenly; }
  .sm-justifyBetween { justify-content: space-between; }
  .sm-justifyStart { justify-content: start; }
  .sm-justifyEnd { justify-content: flex-end; }
  .sm-alignStart { align-items: flex-start; }
  .sm-alignCenter { align-items: center; }
  .sm-alignEnd { align-items: flex-end; }
  .sm-flex1 { flex: 1; }
  .sm-flexColumn { flex-direction: column; }
  .sm-flexRow { flex-direction: row; }
  .sm-flexWrap { flex-wrap: wrap; }
  .sm-flexWrapReverse { flex-wrap: wrap-reverse; }
  .sm-colAuto { width: auto; }
  .sm-col1 { width: calc(1 / 12 * 100%); }
  .sm-col2 { width: calc(2 / 12 * 100%); }
  .sm-col3 { width: calc(3 / 12 * 100%); }
  .sm-col4 { width: calc(4 / 12 * 100%); }
  .sm-col5 { width: calc(5 / 12 * 100%); }
  .sm-col6 { width: calc(6 / 12 * 100%); }
  .sm-col7 { width: calc(7 / 12 * 100%); }
  .sm-col8 { width: calc(8 / 12 * 100%); }
  .sm-col9 { width: calc(9 / 12 * 100%); }
  .sm-col10 { width: calc(10 / 12 * 100%); }
  .sm-col11 { width: calc(11 / 12 * 100%); }
  .sm-col12 { width: calc(12 / 12 * 100%); }
  .sm-col1Fifth { width: calc(1 / 5 * 100%); }
  .sm-grid { display: grid; }
  .sm-grid1Col { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm-grid2Col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-grid3Col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-grid4Col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm-grid5Col { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm-grid6Col { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm-spanAllCols { grid-column: 1/-1; }  
}
@media (min-width: 48em) {
  .columns { margin-left: calc(0em - var(--md-gutter)); margin-right: calc(0em - var(--md-gutter)); }
  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col1Fifth { padding-left: var(--md-gutter); padding-right: var(--md-gutter); }

  .md-justifyCenter { justify-content: center; }
  .md-justifyEvenly { justify-content: space-evenly; }
  .md-justifyBetween { justify-content: space-between; }
  .md-justifyStart { justify-content: start; }
  .md-justifyEnd { justify-content: flex-end; }
  .md-alignStart { align-items: flex-start; }
  .md-alignCenter { align-items: center; }
  .md-alignEnd { align-items: flex-end; }
  .md-flex1 { flex: 1; }
  .md-flexColumn { flex-direction: column; }
  .md-flexRow { flex-direction: row; }
  .md-flexWrap { flex-wrap: wrap; }
  .md-flexWrapReverse { flex-wrap: wrap-reverse; }
  .md-colAuto { width: auto; }
  .md-col1 { width: calc(1 / 12 * 100%); }
  .md-col2 { width: calc(2 / 12 * 100%); }
  .md-col3 { width: calc(3 / 12 * 100%); }
  .md-col4 { width: calc(4 / 12 * 100%); }
  .md-col5 { width: calc(5 / 12 * 100%); }
  .md-col6 { width: calc(6 / 12 * 100%); }
  .md-col7 { width: calc(7 / 12 * 100%); }
  .md-col8 { width: calc(8 / 12 * 100%); }
  .md-col9 { width: calc(9 / 12 * 100%); }
  .md-col10 { width: calc(10 / 12 * 100%); }
  .md-col11 { width: calc(11 / 12 * 100%); }
  .md-col12 { width: calc(12 / 12 * 100%); }
  .md-col1Fifth { width: calc(1 / 5 * 100%); }
  .md-grid { display: grid; }
  .md-grid1Col { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md-grid2Col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-grid3Col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-grid4Col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md-grid5Col { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md-grid6Col { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md-spanAllCols { grid-column: 1/-1; }  
}
@media (min-width: 60em) {
  .lg-justifyCenter { justify-content: center; }
  .lg-justifyEvenly { justify-content: space-evenly; }
  .lg-justifyBetween { justify-content: space-between; }
  .lg-justifyStart { justify-content: start; }
  .lg-justifyEnd { justify-content: flex-end; }
  .lg-alignStart { align-items: flex-start; }
  .lg-alignCenter { align-items: center; }
  .lg-alignEnd { align-items: flex-end; }
  .lg-flex1 { flex: 1; }
  .lg-flexColumn { flex-direction: column; }
  .lg-flexRow { flex-direction: row; }
  .lg-flexWrap { flex-wrap: wrap; }
  .lg-flexWrapReverse { flex-wrap: wrap-reverse; }
  .lg-colAuto { width: auto; }
  .lg-col1 { width: calc(1 / 12 * 100%); }
  .lg-col2 { width: calc(2 / 12 * 100%); }
  .lg-col3 { width: calc(3 / 12 * 100%); }
  .lg-col4 { width: calc(4 / 12 * 100%); }
  .lg-col5 { width: calc(5 / 12 * 100%); }
  .lg-col6 { width: calc(6 / 12 * 100%); }
  .lg-col7 { width: calc(7 / 12 * 100%); }
  .lg-col8 { width: calc(8 / 12 * 100%); }
  .lg-col9 { width: calc(9 / 12 * 100%); }
  .lg-col10 { width: calc(10 / 12 * 100%); }
  .lg-col11 { width: calc(11 / 12 * 100%); }
  .lg-col12 { width: calc(12 / 12 * 100%); }
  .lg-col1Fifth { width: calc(1 / 5 * 100%); }
  .lg-grid { display: grid; }
  .lg-grid1Col { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg-grid2Col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-grid3Col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-grid4Col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg-grid5Col { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg-grid6Col { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg-spanAllCols { grid-column: 1/-1; }  
}
@media (min-width: 90em) {
  .xl-justifyCenter { justify-content: center; }
  .xl-justifyEvenly { justify-content: space-evenly; }
  .xl-justifyBetween { justify-content: space-between; }
  .xl-justifyStart { justify-content: start; }
  .xl-justifyEnd { justify-content: flex-end; }
  .xl-alignStart { align-items: flex-start; }
  .xl-alignCenter { align-items: center; }
  .xl-alignEnd { align-items: flex-end; }
  .xl-flex1 { flex: 1; }
  .xl-flexColumn { flex-direction: column; }
  .xl-flexRow { flex-direction: row; }
  .xl-flexWrap { flex-wrap: wrap; }
  .xl-flexWrapReverse { flex-wrap: wrap-reverse; }
  .xl-colAuto { width: auto; }
  .xl-col1 { width: calc(1 / 12 * 100%); }
  .xl-col2 { width: calc(2 / 12 * 100%); }
  .xl-col3 { width: calc(3 / 12 * 100%); }
  .xl-col4 { width: calc(4 / 12 * 100%); }
  .xl-col5 { width: calc(5 / 12 * 100%); }
  .xl-col6 { width: calc(6 / 12 * 100%); }
  .xl-col7 { width: calc(7 / 12 * 100%); }
  .xl-col8 { width: calc(8 / 12 * 100%); }
  .xl-col9 { width: calc(9 / 12 * 100%); }
  .xl-col10 { width: calc(10 / 12 * 100%); }
  .xl-col11 { width: calc(11 / 12 * 100%); }
  .xl-col12 { width: calc(12 / 12 * 100%); }
  .xl-col1Fifth { width: calc(1 / 5 * 100%); }
  .xl-grid { display: grid; }
  .xl-grid1Col { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .xl-grid2Col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl-grid3Col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl-grid4Col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl-grid5Col { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl-grid6Col { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl-spanAllCols { grid-column: 1/-1; }
}