/* FlexCore Custom Build
(C) SDBagel 2021 MIT
https://sdbagel.com/FlexCore */

.flex {
  flex: 1 1; }

.flex-row {
  display: flex;
  flex-direction: row; }

.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse; }

.flex-column {
  display: flex;
  flex-direction: column; }

.flex-column-reverse {
  display: flex;
  flex-direction: column-reverse; }

.flex-smart {
  display: flex;
  flex-direction: column; }

@media (min-width: 768px) {
  .flex-smart {
    flex-direction: row; } }

.flex-smart-reverse {
  display: flex;
  flex-direction: column-reverse; }

@media (min-width: 768px) {
  .flex-smart-reverse {
    flex-direction: row-reverse; } }

.flex-wrap {
  flex-wrap: wrap; }

.justify-start {
  justify-content: flex-start; }

.justify-center {
  justify-content: center; }

.justify-end {
  justify-content: flex-end; }

.justify-around {
  justify-content: space-around; }

.justify-between {
  justify-content: space-between; }

.justify-evenly {
  justify-content: space-evenly; }

.align-start {
  align-items: flex-start; }

.align-end {
  align-items: flex-end; }

.align-center {
  align-items: center; }

body {
  margin: 0; }

.container, .container-wide {
  max-width: 320px;
  margin: 0 auto;
  padding: 10px; }

@media (min-width: 512px) {
  .container, .container-wide {
    max-width: 512px;
    padding: 20px 10px; } }

@media (min-width: 768px) {
  .container, .container-wide {
    max-width: 768px; } }

@media (min-width: 992px) {
  .container, .container-wide {
    max-width: 992px; } }

@media (min-width: 1300px) {
  .container-wide {
    max-width: 1300px; } }

.flex-gap {
  column-gap: 20px;
  row-gap: 20px;
}

@media (min-width: 768px) {
  .flex-gap {
    column-gap: 50px;
    row-gap: 50px;
  }  
}

@media (min-width: 992px) {
  .flex-gap {
    column-gap: 80px;
    row-gap: 80px;
  }  
}