.container {
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}

@media (min-width: 1232px) {
  .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 1200px;
  }
}

.layout--horizontal,
.layout--vertical,
.layout--horizontal-sm {
  display: flex;
}

.layout--horizontal {
  flex-direction: row;
}

.layout--vertical,
.layout--horizontal-sm {
  flex-direction: column;
}

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

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

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

.flex      { flex: 1; }
.flex-2    { flex: 2; }
.flex-3    { flex: 3; }
.flex-4    { flex: 4; }
.flex-5    { flex: 5; }
.flex-6    { flex: 6; }
.flex-7    { flex: 7; }
.flex-8    { flex: 8; }
.flex-9    { flex: 9; }
.flex-10   { flex: 10; }
.flex-11   { flex: 11; }
.flex-12   { flex: 12; }

.flex-width { width: 100%; }

.max-width--560   {    max-width: 560px; }
.max-width--640   {    max-width: 640px; }
.max-width--720   {    max-width: 720px; }
.max-width--768   {    max-width: 768px; }

.height--8 {            height: 8px; }
.height--16 {           height: 16px; }