.grid { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.grid > * { margin: 0; }
.grid > * > :last-child { margin-bottom: 0; }
/* Gutter */
.grid { margin-right: -30px; }
.grid > * { padding-right: 30px; }
/* Vertical */
.grid + .grid, .grid > .grid-margin, * + .grid-margin { margin-top: 30px; }
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Horizontal */
  .grid { margin-right: -40px; }
  .grid > * { padding-right: 40px; }
  /* Vertical */
  .grid + .grid, .grid > .grid-margin, * + .grid-margin { margin-top: 40px; }
}
/* Small */
/* Horizontal */
.grid-small, .grid-column-small { margin-right: -15px; }
.grid-small > *, .grid-column-small > * { padding-right: 15px; }
/* Vertical */
.grid + .grid-small, .grid + .grid-row-small, .grid-small > .grid-margin, .grid-row-small > .grid-margin, * + .grid-margin-small { margin-top: 15px; }
/* Medium */
/* Horizontal */
.grid-medium, .grid-column-medium { margin-right: -30px; }
.grid-medium > *, .grid-column-medium > * { padding-right: 30px; }
/* Vertical */
.grid + .grid-medium, .grid + .grid-row-medium, .grid-medium > .grid-margin, .grid-row-medium > .grid-margin, * + .grid-margin-medium { margin-top: 30px; }
/* Large */
/* Horizontal */
.grid-large, .grid-column-large { margin-right: -40px; }
.grid-large > *, .grid-column-large > * { padding-right: 40px; }
/* Vertical */
.grid + .grid-large, .grid + .grid-row-large, .grid-large > .grid-margin, .grid-row-large > .grid-margin, * + .grid-margin-large { margin-top: 40px; }
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Horizontal */
  .grid-large, .grid-column-large { margin-right: -70px; }
  .grid-large > *, .grid-column-large > * { padding-right: 70px; }
  /* Vertical */
  .grid + .grid-large, .grid + .grid-row-large, .grid-large > .grid-margin, .grid-row-large > .grid-margin, * + .grid-margin-large { margin-top: 70px; }
}
/* Collapse */
/* Horizontal */
.grid-collapse, .grid-column-collapse { margin-right: 0; }
.grid-collapse > *, .grid-column-collapse > * { padding-right: 0; }
/* Vertical */
.grid + .grid-collapse, .grid + .grid-row-collapse, .grid-collapse > .grid-margin, .grid-row-collapse > .grid-margin { margin-top: 0; }
/* Divider */
.grid-divider > * { position: relative; }
.grid-divider > :not(.first-column)::before { content: ""; position: absolute; top: 0; bottom: 0; border-right: 1px solid #e5e5e5; } 
/* Vertical */
.grid-divider.grid-stack > .grid-margin::before { content: ""; position: absolute; right: 0; left: 0; border-top: 1px solid #e5e5e5; }
/* Default */
/* Horizontal */
.grid-divider { margin-right: -60px; }
.grid-divider > * { padding-right: 60px; }
.grid-divider > :not(.first-column)::before { right: 30px; }
/* Vertical */
.grid-divider.grid-stack > .grid-margin { margin-top: 60px; }
.grid-divider.grid-stack > .grid-margin::before { top: -30px; right: 60px; }
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Horizontal */
  .grid-divider { margin-right: -80px; }
  .grid-divider > * { padding-right: 80px; }
  .grid-divider > :not(.first-column)::before { right: 40px; }
  /* Vertical */
  .grid-divider.grid-stack > .grid-margin { margin-top: 80px; }
  .grid-divider.grid-stack > .grid-margin::before { top: -40px; right: 80px; }
}
/* Small */
/* Horizontal */
.grid-divider.grid-small, .grid-divider.grid-column-small { margin-right: -30px; }
.grid-divider.grid-small > *, .grid-divider.grid-column-small > * { padding-right: 30px; }
.grid-divider.grid-small > :not(.first-column)::before, .grid-divider.grid-column-small > :not(.first-column)::before { right: 15px; }
/* Vertical */
.grid-divider.grid-small.grid-stack > .grid-margin, .grid-divider.grid-row-small.grid-stack > .grid-margin { margin-top: 30px; }
.grid-divider.grid-small.grid-stack > .grid-margin::before { top: -15px; right: 30px; }
.grid-divider.grid-row-small.grid-stack > .grid-margin::before { top: -15px; }
.grid-divider.grid-column-small.grid-stack > .grid-margin::before { right: 30px; }
/* Medium */
/* Horizontal */
.grid-divider.grid-medium, .grid-divider.grid-column-medium { margin-right: -60px; }
.grid-divider.grid-medium > *, .grid-divider.grid-column-medium > * { padding-right: 60px; }
.grid-divider.grid-medium > :not(.first-column)::before, .grid-divider.grid-column-medium > :not(.first-column)::before { right: 30px; }
/* Vertical */
.grid-divider.grid-medium.grid-stack > .grid-margin, .grid-divider.grid-row-medium.grid-stack > .grid-margin { margin-top: 60px; }
.grid-divider.grid-medium.grid-stack > .grid-margin::before { top: -30px; right: 60px; }
.grid-divider.grid-row-medium.grid-stack > .grid-margin::before { top: -30px; }
.grid-divider.grid-column-medium.grid-stack > .grid-margin::before { right: 60px; }
/* Large */
/* Horizontal */
.grid-divider.grid-large, .grid-divider.grid-column-large { margin-right: -80px; }
.grid-divider.grid-large > *, .grid-divider.grid-column-large > * { padding-right: 80px; }
.grid-divider.grid-large > :not(.first-column)::before, .grid-divider.grid-column-large > :not(.first-column)::before { right: 40px; }
/* Vertical */
.grid-divider.grid-large.grid-stack > .grid-margin, .grid-divider.grid-row-large.grid-stack > .grid-margin { margin-top: 80px; }
.grid-divider.grid-large.grid-stack > .grid-margin::before { top: -40px; right: 80px; } 
.grid-divider.grid-row-large.grid-stack > .grid-margin::before { top: -40px; }
.grid-divider.grid-column-large.grid-stack > .grid-margin::before { right: 80px; }
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Horizontal */
  .grid-divider.grid-large, .grid-divider.grid-column-large { margin-right: -140px; }
  .grid-divider.grid-large > *, .grid-divider.grid-column-large > * { padding-right: 140px; }
  .grid-divider.grid-large > :not(.first-column)::before, .grid-divider.grid-column-large > :not(.first-column)::before { right: 70px; }
  /* Vertical */
  .grid-divider.grid-large.grid-stack > .grid-margin, .grid-divider.grid-row-large.grid-stack > .grid-margin { margin-top: 140px; }
  .grid-divider.grid-large.grid-stack > .grid-margin::before { top: -70px; right: 140px; }
  .grid-divider.grid-row-large.grid-stack > .grid-margin::before { top: -70px; }
  .grid-divider.grid-column-large.grid-stack > .grid-margin::before { right: 140px; }
}
/* Match child of a grid cell */
.grid-match > *, .grid-item-match { display: flex; flex-wrap: wrap; }
.grid-match > * > :not([class*='width']), .grid-item-match > :not([class*='width']) { box-sizing: border-box; width: 100%; flex: auto; }

[class*='child-width'] > * { box-sizing: border-box; width: 100%; }
.child-width-1-2 > * { width: 50%; }
.child-width-1-3 > * { width: calc(100% * 1 / 3.001); }
.child-width-1-4 > * { width: 25%; }
.child-width-1-5 > * { width: 20%; }
.child-width-1-6 > * { width: calc(100% * 1 / 6.001); }
.child-width-auto > * { width: auto; }

.child-width-expand > :not([class*='width']) { flex: 1; min-width: 1px; }

/* Phone landscape and bigger */
@media (min-width: 640px) {
  .child-width-1-1\@s > * { width: 100%; } 
  .child-width-1-2\@s > * { width: 50%; }
  .child-width-1-3\@s > * { width: calc(100% * 1 / 3.001); }
  .child-width-1-4\@s > * { width: 25%; }
  .child-width-1-5\@s > * { width: 20%; }
  .child-width-1-6\@s > * { width: calc(100% * 1 / 6.001); }
  .child-width-auto\@s > * { width: auto; }
  .child-width-expand\@s > :not([class*='width']) { flex: 1; min-width: 1px; }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .child-width-1-1\@m > * { width: 100%; }
  .child-width-1-2\@m > * { width: 50%; }
  .child-width-1-3\@m > * { width: calc(100% * 1 / 3.001); }
  .child-width-1-4\@m > * { width: 25%; }
  .child-width-1-5\@m > * { width: 20%; }
  .child-width-1-6\@m > * { width: calc(100% * 1 / 6.001); }
  .child-width-auto\@m > * { width: auto; }
  .child-width-expand\@m > :not([class*='width']) { flex: 1; min-width: 1px; }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .child-width-1-1\@l > * { width: 100%; } 
  .child-width-1-2\@l > * { width: 50%; }
  .child-width-1-3\@l > * { width: calc(100% * 1 / 3.001); }
  .child-width-1-4\@l > * { width: 25%; }
  .child-width-1-5\@l > * { width: 20%; }
  .child-width-1-6\@l > * { width: calc(100% * 1 / 6.001); }
  .child-width-auto\@l > * { width: auto; }
  .child-width-expand\@l > :not([class*='width']) { flex: 1; min-width: 1px; }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .child-width-1-1\@xl > * { width: 100%; }
  .child-width-1-2\@xl > * { width: 50%; }
  .child-width-1-3\@xl > * { width: calc(100% * 1 / 3.001); }
  .child-width-1-4\@xl > * { width: 25%; }
  .child-width-1-5\@xl > * { width: 20%; }
  .child-width-1-6\@xl > * { width: calc(100% * 1 / 6.001); }
  .child-width-auto\@xl > * { width: auto; }
  .child-width-expand\@xl > :not([class*='width']) { flex: 1; min-width: 1px; }
}
/* Single Widths */
[class*='width'] { box-sizing: border-box; width: 100%; max-width: 100%; }
/* Halves */
.width-1-2 { width: 50%; }
/* Thirds */
.width-1-3 { width: calc(100% * 1 / 3.001); }
.width-2-3 { width: calc(100% * 2 / 3.001); }
/* Quarters */
.width-1-4 { width: 25%; }
.width-3-4 { width: 75%; }
/* Fifths */
.width-1-5 { width: 20%; }
.width-2-5 { width: 40%; }
.width-3-5 { width: 60%; }
.width-4-5 { width: 80%; }
/* Sixths */
.width-1-6 { width: calc(100% * 1 / 6.001); }
.width-5-6 { width: calc(100% * 5 / 6.001); }
/* Pixel */
.width-small { width: 150px; }
.width-medium { width: 300px; }
.width-large { width: 450px; }
.width-xlarge { width: 600px; }
.width-2xlarge { width: 750px; }
/* Auto */
.width-auto { width: auto; }
/* Expand */
.width-expand { flex: 1; min-width: 1px; }
/* Phone landscape and bigger */
@media (min-width: 640px) {
  /* Whole */
  .width-1-1\@s { width: 100%; }
  /* Halves */
  .width-1-2\@s { width: 50%; }
  /* Thirds */
  .width-1-3\@s { width: calc(100% * 1 / 3.001); }
  .width-2-3\@s { width: calc(100% * 2 / 3.001); }
  /* Quarters */
  .width-1-4\@s { width: 25%; }
  .width-3-4\@s { width: 75%; }
  /* Fifths */
  .width-1-5\@s { width: 20%; }
  .width-2-5\@s { width: 40%; }
  .width-3-5\@s { width: 60%; }
  .width-4-5\@s { width: 80%; }
  /* Sixths */
  .width-1-6\@s { width: calc(100% * 1 / 6.001); }
  .width-5-6\@s { width: calc(100% * 5 / 6.001); }
  /* Pixel */
  .width-small\@s { width: 150px; }
  .width-medium\@s { width: 300px; }
  .width-large\@s { width: 450px; }
  .width-xlarge\@s { width: 600px; }
  .width-2xlarge\@s { width: 750px; }
  /* Auto */
  .width-auto\@s { width: auto; }
  /* Expand */
  .width-expand\@s { flex: 1; min-width: 1px; }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  /* Whole */
  .width-1-1\@m { width: 100%; }
  /* Halves */
  .width-1-2\@m { width: 50%; }
  /* Thirds */
  .width-1-3\@m { width: calc(100% * 1 / 3.001); }
  .width-2-3\@m { width: calc(100% * 2 / 3.001); }
  /* Quarters */
  .width-1-4\@m { width: 25%; }
  .width-3-4\@m { width: 75%; }
  /* Fifths */
  .width-1-5\@m { width: 20%; }
  .width-2-5\@m { width: 40%; }
  .width-3-5\@m { width: 60%; }
  .width-4-5\@m { width: 80%; }
  /* Sixths */
  .width-1-6\@m { width: calc(100% * 1 / 6.001); }
  .width-5-6\@m { width: calc(100% * 5 / 6.001); }
  /* Pixel */
  .width-small\@m { width: 150px; }
  .width-medium\@m { width: 300px; }
  .width-large\@m { width: 450px; }
  .width-xlarge\@m { width: 600px; }
  .width-2xlarge\@m { width: 750px; }
  /* Auto */
  .width-auto\@m { width: auto; }
  /* Expand */
  .width-expand\@m { flex: 1; min-width: 1px; }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  /* Whole */
  .width-1-1\@l { width: 100%; }
  /* Halves */
  .width-1-2\@l { width: 50%; }
  /* Thirds */
  .width-1-3\@l { width: calc(100% * 1 / 3.001); }
  .width-2-3\@l { width: calc(100% * 2 / 3.001); }
  /* Quarters */
  .width-1-4\@l { width: 25%; }
  .width-3-4\@l { width: 75%; }
  /* Fifths */
  .width-1-5\@l { width: 20%; }
  .width-2-5\@l { width: 40%; }
  .width-3-5\@l { width: 60%; }
  .width-4-5\@l { width: 80%; }
  /* Sixths */
  .width-1-6\@l { width: calc(100% * 1 / 6.001); }
  .width-5-6\@l { width: calc(100% * 5 / 6.001); }
  /* Pixel */
  .width-small\@l { width: 150px; }
  .width-medium\@l { width: 300px; }
  .width-large\@l { width: 450px; }
  .width-xlarge\@l { width: 600px; }
  .width-2xlarge\@l { width: 750px; }
  /* Auto */
  .width-auto\@l { width: auto; }
  /* Expand */
  .width-expand\@l { flex: 1; min-width: 1px; }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  /* Whole */
  .width-1-1\@xl { width: 100%; }
  /* Halves */
  .width-1-2\@xl { width: 50%; }
  /* Thirds */
  .width-1-3\@xl { width: calc(100% * 1 / 3.001); }
  .width-2-3\@xl { width: calc(100% * 2 / 3.001); }
  /* Quarters */
  .width-1-4\@xl { width: 25%; }
  .width-3-4\@xl { width: 75%; }
  /* Fifths */
  .width-1-5\@xl { width: 20%; }
  .width-2-5\@xl { width: 40%; }
  .width-3-5\@xl { width: 60%; }
  .width-4-5\@xl { width: 80%; }
  /* Sixths */
  .width-1-6\@xl { width: calc(100% * 1 / 6.001); }
  .width-5-6\@xl { width: calc(100% * 5 / 6.001); }
  /* Pixel */
  .width-small\@xl { width: 150px; }
  .width-medium\@xl { width: 300px; }
  .width-large\@xl { width: 450px; }
  .width-xlarge\@xl { width: 600px; }
  .width-2xlarge\@xl { width: 750px; }
  /* Auto */
  .width-auto\@xl { width: auto; }
  /* Expand */
  .width-expand\@xl { flex: 1; min-width: 1px; }
}