/* Get the variables in early so they're available */
/*
  The breakpoints for all resolutions represented as pairs with the breakpoint name and its associated pixel width.
  Note custom-media variables do not conflict with custom-properties
  http://cssnext.io/features/#custom-media-queries
  @media (--medium) { ...styles... }
*/
/*
  Allows you to create your own selectors
  http://cssnext.io/features/#custom-selectors
  .MyModule:--enter {
    ...
  }
*/
/*
  The z-indexes for the project.
  z-index: var(--zindex--nav);
*/
/* Grid */
.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  width: 100%;
}
.grid > * {
    padding-top: 28px;
    padding-top: 1.75rem;
    width: 100%;
  }
.grid > *:nth-child(1) {
      padding-top: 0;
    }
@media only screen and (min-width: 640px) {
      .grid--4up > *:nth-child(1), .grid--4up > *:nth-child(2) { padding-top: 0; }
      .grid--4up > *:nth-child(1n) { width: 50%; }
      .grid--4up > *:nth-child(2n+1) { padding-right: 14px; padding-right: 0.875rem; }
      .grid--4up > *:nth-child(2n+2) { padding-left: 14px; padding-left: 0.875rem; }
  }
@media only screen and (min-width: 768px) {
      .grid--3up > *:nth-child(1), .grid--3up > *:nth-child(2), .grid--3up > *:nth-child(3) { padding-top: 0; }
      .grid--3up > *:nth-child(1n) { width: 33.33333%; }
      .grid--3up > *:nth-child(3n+1) { padding-right: 14px; padding-right: 0.875rem; }
      .grid--3up > *:nth-child(3n+3) { padding-left: 14px; padding-left: 0.875rem; }

      .grid--3up > *:nth-child(3n+2) {
        padding-left: 14px;
        padding-left: 0.875rem;
        padding-right: 14px;
        padding-right: 0.875rem;
      }
  }
@media only screen and (min-width: 896px) {
      .grid--2up > *:nth-child(2n+1), .grid--2up-major-minor > *:nth-child(2n+1), .grid--2up-minor-major > *:nth-child(2n+1) { padding-right: 14px; padding-right: 0.875rem; }
      .grid--2up > *:nth-child(2n+2), .grid--2up-major-minor > *:nth-child(2n+2), .grid--2up-minor-major > *:nth-child(2n+2) { padding-left: 14px; padding-left: 0.875rem; }
      .grid--2up > *:nth-child(1), .grid--2up > *:nth-child(2) { padding-top: 0; }
      .grid--2up > *:nth-child(1n) { width: 50%; }
      .grid--2up-major-minor > *:nth-child(1), .grid--2up-major-minor > *:nth-child(2) { padding-top: 0; }
      .grid--2up-major-minor > *:nth-child(2n+1) { width: 33.33333%; }
      .grid--2up-major-minor > *:nth-child(2n+2) { width: 66.66667%; }
      .grid--2up-minor-major > *:nth-child(1), .grid--2up-minor-major > *:nth-child(2) { padding-top: 0; }
      .grid--2up-minor-major > *:nth-child(2n+1) { width: 66.66667%; }
      .grid--2up-minor-major > *:nth-child(2n+2) { width: 33.33333%; }
      .grid--4up > *:nth-child(1), .grid--4up > *:nth-child(2), .grid--4up > *:nth-child(3), .grid--4up > *:nth-child(4) { padding-top: 0; }
      .grid--4up > *:nth-child(1n) { width: 25%; }

      .grid--4up > *:nth-child(4n+1) {
        padding-left: 0;
        padding-right: 14px;
        padding-right: 0.875rem;
      }

      .grid--4up > *:nth-child(4n+2), .grid--4up > *:nth-child(4n+3) {
        padding-left: 14px;
        padding-left: 0.875rem;
        padding-right: 14px;
        padding-right: 0.875rem;
      }

      .grid--4up > *:nth-child(4n+4) {
        padding-left: 14px;
        padding-left: 0.875rem;
        padding-right: 0;
      }
  }