/* the GU breakpoints */
/* 1.25rem = 20px = The GU grid gutter */
.panel {
  width: 100%;
  background-color: #121212;
  padding: 2rem 0;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/*first set flexbox for ie11 */
/* then... Grid for all other browsers */
.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1.25rem;
  display: -ms-grid;
  display: grid;
  -webkit-column-gap: 1.25rem;
          column-gap: 1.25rem;
}

/* Optional: Set mobile first styles for all direct children, the grid items */
.grid > * {
  width: 100%;
  margin-bottom: 1.25rem;
}

@media screen and (min-width: 740px) {
  .container {
    max-width: 740px;
  }
  .grid--4-col {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  /* ie11 flexbox fallback - assign columns a width */
  .grid--4-col > * {
    padding-left: 1.25rem;
    width: 50%;
  }
}

@media screen and (min-width: 980px) {
  .container {
    max-width: 980px;
  }
  /* assigns columns a width with flexbox */
  .grid--2-col > * {
    width: 50%;
  }
  /* assigns columns a width with flexbox */
  .grid--3-col > * {
    width: 33.33%;
  }
  /* assigns columns a width with flexbox */
  .grid--4-col > * {
    width: 25%;
  }
  /* sets columns in grid instead */
  .grid--2-col {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  /* sets columns in grid instead */
  .grid--3-col {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
  /* sets columns in grid instead */
  .grid--4-col {
    -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
  }
  .grid > * {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1140px) {
  .container {
    max-width: 1140px;
  }
}

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

/* Is Grid supported? Yes? Then reset all the flexbox helpers */
@supports (display: grid) {
  .grid {
    margin-left: 0;
  }
  .grid > * {
    padding: 0;
    width: 100%;
  }
}
/*# sourceMappingURL=grid.css.map */