*,
*:after,
*:before {
  box-sizing: border-box;
}

.container {
  position: relative;
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
  @media (min-width: 60em) {
    .row {
      flex-direction: row;
    }
  }
  .col-debug {
    display: none;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .row--debug {
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    z-index: -1;
    background-image: linear-gradient(transparent 95%, rgba(255,0,0,0.5) 100%);
    background-size: 100% 16px;
  }
  .row--debug .bg-grey {
    display: flex;
    flex: 1 0;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: rgba(0,0,0,.02);
  }

.col--baseline {
  background-image: linear-gradient(transparent 95%, rgba(255,0,0,0.5) 100%);
  background-size: 100% 16px;
}


.bg-yellow {
  background: yellow;
}
.bg-grey {
  background: #eee;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-fill {
  display: flex;
  padding-left: 1rem;
  padding-right: 1rem;
  flex-direction: column;
}

.row .row {
  margin-left: -1rem;
  margin-right: -1rem;
}

@media (min-width: 60em) {
  .above-1 { padding-top: 1rem }
  .above-2 { padding-top: 2rem }
  .above-3 { padding-top: 3rem }
  .above-4 { padding-top: 4rem }
  .above-5 { padding-top: 5rem }
  .above-6 { padding-top: 6rem }
  .above-7 { padding-top: 7rem }
  .above-8 { padding-top: 8rem }
  .above-9 { padding-top: 9rem }
  .above-10 { padding-top: 10rem }

  .below-1 { padding-bottom: 1rem }
  .below-2 { padding-bottom: 2rem }
  .below-3 { padding-bottom: 3rem }
  .below-4 { padding-bottom: 4rem }
  .below-5 { padding-bottom: 5rem }
  .below-6 { padding-bottom: 6rem }
  .below-7 { padding-bottom: 7rem }
  .below-8 { padding-bottom: 8rem }
  .below-9 { padding-bottom: 9rem }
  .below-10 { padding-bottom: 10rem }
}

@media (max-width: 60em) {
 .mobile-col-1 { width: 100%; max-width: 6rem }
 .mobile-col-2 { width: 100%; max-width: 9rem }
 .mobile-col-3 { width: 100%; max-width: 12rem }
 .mobile-col-4 { width: 100%; max-width: 15rem }
 .mobile-col-5 { width: 100%; max-width: 18rem }
 .mobile-col-6 { width: 100%; max-width: 21rem }
 .mobile-col-7 { width: 100%; max-width: 24rem }
 .mobile-col-8 { width: 100%; max-width: 27rem }
 .mobile-col-9 { width: 100%; max-width: 30rem }
 .mobile-col-10 { width: 100%; max-width: 33rem }
}

@media (min-width: 60em) {
  .col-1 { width: 10% }
  .col-2 { width: 20% }
  .col-3 { width: 30% }
  .col-4 { width: 40% }
  .col-5 { width: 50% }
  .col-6 { width: 60% }
  .col-7 { width: 70% }
  .col-8 { width: 80% }
  .col-9 { width: 90% }
  .col-10 { width: 100% }
  .col-fill { flex: 1 }

  /* OFFSET */
  .left-1 { margin-left: 10% }
  .left-2 { margin-left: 20% }
  .left-3 { margin-left: 30% }
  .left-4 { margin-left: 40% }
  .left-5 { margin-left: 50% }
  .left-6 { margin-left: 60% }
  .left-7 { margin-left: 70% }
  .left-8 { margin-left: 80% }
  .left-9 { margin-left: 90% }

  .right-1 { margin-right: 10% }
  .right-2 { margin-right: 20% }
  .right-3 { margin-right: 30% }
  .right-4 { margin-right: 40% }
  .right-5 { margin-right: 50% }
  .right-6 { margin-right: 60% }
  .right-7 { margin-right: 70% }
  .right-8 { margin-right: 80% }
  .right-9 { margin-right: 90% }

  /* NESTED ROWS */
  .row > .col > .row {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .col-2 > .row > .col-1 { width: calc(100% / 2 * 1) }

  .col-3 > .row > .col-1 { width: calc(100% / 3 * 1) }
  .col-3 > .row > .col-2 { width: calc(100% / 3 * 2) }

  .col-4 > .row > .col-1 { width: calc(100% / 4 * 1) }
  .col-4 > .row > .col-2 { width: calc(100% / 4 * 2) }
  .col-4 > .row > .col-3 { width: calc(100% / 4 * 3) }

  .col-5 > .row > .col-1 { width: calc(100% / 5 * 1) }
  .col-5 > .row > .col-2 { width: calc(100% / 5 * 2) }
  .col-5 > .row > .col-3 { width: calc(100% / 5 * 3) }
  .col-5 > .row > .col-4 { width: calc(100% / 5 * 4) }
  .col-5 > .row > .col-5 { width: calc(100%) }

  .col-6 > .row > .col-1 { width: calc(100% / 6 * 1) }
  .col-6 > .row > .col-2 { width: calc(100% / 6 * 2) }
  .col-6 > .row > .col-3 { width: calc(100% / 6 * 3) }
  .col-6 > .row > .col-4 { width: calc(100% / 6 * 4) }
  .col-6 > .row > .col-5 { width: calc(100% / 6 * 5) }

  .col-7 > .row > .col-1 { width: calc(100% / 7 * 1) }
  .col-7 > .row > .col-2 { width: calc(100% / 7 * 2) }
  .col-7 > .row > .col-3 { width: calc(100% / 7 * 3) }
  .col-7 > .row > .col-4 { width: calc(100% / 7 * 4) }
  .col-7 > .row > .col-5 { width: calc(100% / 7 * 5) }
  .col-7 > .row > .col-6 { width: calc(100% / 7 * 6) }

  .col-8 > .row > .col-1 { width: calc(100% / 8 * 1) }
  .col-8 > .row > .col-2 { width: calc(100% / 8 * 2) }
  .col-8 > .row > .col-3 { width: calc(100% / 8 * 3) }
  .col-8 > .row > .col-4 { width: calc(100% / 8 * 4) }
  .col-8 > .row > .col-5 { width: calc(100% / 8 * 5) }
  .col-8 > .row > .col-6 { width: calc(100% / 8 * 6) }
  .col-8 > .row > .col-7 { width: calc(100% / 8 * 7) }

  .col-9 > .row > .col-1 { width: calc(100% / 9 * 1) }
  .col-9 > .row > .col-2 { width: calc(100% / 9 * 2) }
  .col-9 > .row > .col-3 { width: calc(100% / 9 * 3) }
  .col-9 > .row > .col-4 { width: calc(100% / 9 * 4) }
  .col-9 > .row > .col-5 { width: calc(100% / 9 * 5) }
  .col-9 > .row > .col-6 { width: calc(100% / 9 * 6) }
  .col-9 > .row > .col-7 { width: calc(100% / 9 * 7) }
  .col-9 > .row > .col-8 { width: calc(100% / 9 * 8) }

  .col-1 > .row > .col-1,
  .col-2 > .row > .col-2,
  .col-3 > .row > .col-3,
  .col-4 > .row > .col-4,
  .col-5 > .row > .col-5,
  .col-6 > .row > .col-6,
  .col-7 > .row > .col-7,
  .col-8 > .row > .col-8,
  .col-9 > .row > .col-9 {
    width: 100%;
  }

  /* NESTED OFFSET */
  .col-2 > .row > .left-1 { margin-left: calc(100% / 2 * 1) }

  .col-3 > .row > .left-1 { margin-left: calc(100% / 3 * 1) }
  .col-3 > .row > .left-2 { margin-left: calc(100% / 3 * 2) }

  .col-4 > .row > .left-1 { margin-left: calc(100% / 4 * 1) }
  .col-4 > .row > .left-2 { margin-left: calc(100% / 4 * 2) }
  .col-4 > .row > .left-3 { margin-left: calc(100% / 4 * 3) }

  .col-5 > .row > .left-1 { margin-left: calc(100% / 5 * 1) }
  .col-5 > .row > .left-2 { margin-left: calc(100% / 5 * 2) }
  .col-5 > .row > .left-3 { margin-left: calc(100% / 5 * 3) }
  .col-5 > .row > .left-4 { margin-left: calc(100% / 5 * 4) }

  .col-6 > .row > .left-1 { margin-left: calc(100% / 6 * 1) }
  .col-6 > .row > .left-2 { margin-left: calc(100% / 6 * 2) }
  .col-6 > .row > .left-3 { margin-left: calc(100% / 6 * 3) }
  .col-6 > .row > .left-4 { margin-left: calc(100% / 6 * 4) }
  .col-6 > .row > .left-5 { margin-left: calc(100% / 6 * 5) }

  .col-7 > .row > .left-1 { margin-left: calc(100% / 7 * 1) }
  .col-7 > .row > .left-2 { margin-left: calc(100% / 7 * 2) }
  .col-7 > .row > .left-3 { margin-left: calc(100% / 7 * 3) }
  .col-7 > .row > .left-4 { margin-left: calc(100% / 7 * 4) }
  .col-7 > .row > .left-5 { margin-left: calc(100% / 7 * 5) }
  .col-7 > .row > .left-6 { margin-left: calc(100% / 7 * 6) }

  .col-8 > .row > .left-1 { margin-left: calc(100% / 8 * 1) }
  .col-8 > .row > .left-2 { margin-left: calc(100% / 8 * 2) }
  .col-8 > .row > .left-3 { margin-left: calc(100% / 8 * 3) }
  .col-8 > .row > .left-4 { margin-left: calc(100% / 8 * 4) }
  .col-8 > .row > .left-5 { margin-left: calc(100% / 8 * 5) }
  .col-8 > .row > .left-6 { margin-left: calc(100% / 8 * 6) }
  .col-8 > .row > .left-7 { margin-left: calc(100% / 8 * 7) }

  .col-9 > .row > .left-1 { margin-left: calc(100% / 9 * 1) }
  .col-9 > .row > .left-2 { margin-left: calc(100% / 9 * 2) }
  .col-9 > .row > .left-3 { margin-left: calc(100% / 9 * 3) }
  .col-9 > .row > .left-4 { margin-left: calc(100% / 9 * 4) }
  .col-9 > .row > .left-5 { margin-left: calc(100% / 9 * 5) }
  .col-9 > .row > .left-6 { margin-left: calc(100% / 9 * 6) }
  .col-9 > .row > .left-7 { margin-left: calc(100% / 9 * 7) }
  .col-9 > .row > .left-8 { margin-left: calc(100% / 9 * 8) }

  .col-2 > .row > .right-1 { margin-right: calc(100% / 2 * 1) }

  .col-3 > .row > .right-1 { margin-right: calc(100% / 3 * 1) }
  .col-3 > .row > .right-2 { margin-right: calc(100% / 3 * 2) }

  .col-4 > .row > .right-1 { margin-right: calc(100% / 4 * 1) }
  .col-4 > .row > .right-2 { margin-right: calc(100% / 4 * 2) }
  .col-4 > .row > .right-3 { margin-right: calc(100% / 4 * 3) }

  .col-5 > .row > .right-1 { margin-right: calc(100% / 5 * 1) }
  .col-5 > .row > .right-2 { margin-right: calc(100% / 5 * 2) }
  .col-5 > .row > .right-3 { margin-right: calc(100% / 5 * 3) }
  .col-5 > .row > .right-4 { margin-right: calc(100% / 5 * 4) }

  .col-6 > .row > .right-1 { margin-right: calc(100% / 6 * 1) }
  .col-6 > .row > .right-2 { margin-right: calc(100% / 6 * 2) }
  .col-6 > .row > .right-3 { margin-right: calc(100% / 6 * 3) }
  .col-6 > .row > .right-4 { margin-right: calc(100% / 6 * 4) }
  .col-6 > .row > .right-5 { margin-right: calc(100% / 6 * 5) }

  .col-7 > .row > .right-1 { margin-right: calc(100% / 7 * 1) }
  .col-7 > .row > .right-2 { margin-right: calc(100% / 7 * 2) }
  .col-7 > .row > .right-3 { margin-right: calc(100% / 7 * 3) }
  .col-7 > .row > .right-4 { margin-right: calc(100% / 7 * 4) }
  .col-7 > .row > .right-5 { margin-right: calc(100% / 7 * 5) }
  .col-7 > .row > .right-6 { margin-right: calc(100% / 7 * 6) }

  .col-8 > .row > .right-1 { margin-right: calc(100% / 8 * 1) }
  .col-8 > .row > .right-2 { margin-right: calc(100% / 8 * 2) }
  .col-8 > .row > .right-3 { margin-right: calc(100% / 8 * 3) }
  .col-8 > .row > .right-4 { margin-right: calc(100% / 8 * 4) }
  .col-8 > .row > .right-5 { margin-right: calc(100% / 8 * 5) }
  .col-8 > .row > .right-6 { margin-right: calc(100% / 8 * 6) }
  .col-8 > .row > .right-7 { margin-right: calc(100% / 8 * 7) }

  .col-9 > .row > .right-1 { margin-right: calc(100% / 9 * 1) }
  .col-9 > .row > .right-2 { margin-right: calc(100% / 9 * 2) }
  .col-9 > .row > .right-3 { margin-right: calc(100% / 9 * 3) }
  .col-9 > .row > .right-4 { margin-right: calc(100% / 9 * 4) }
  .col-9 > .row > .right-5 { margin-right: calc(100% / 9 * 5) }
  .col-9 > .row > .right-6 { margin-right: calc(100% / 9 * 6) }
  .col-9 > .row > .right-7 { margin-right: calc(100% / 9 * 7) }
  .col-9 > .row > .right-8 { margin-right: calc(100% / 9 * 8) }

  /* NESTED COLUMNS */
  .col-1 > .col-1,
  .col-1 > .col-2,
  .col-1 > .col-3,
  .col-1 > .col-4,
  .col-1 > .col-5,
  .col-1 > .col-6,
  .col-1 > .col-7,
  .col-1 > .col-8,
  .col-1 > .col-9,

  .col-2 > .col-1,
  .col-2 > .col-2,
  .col-2 > .col-3,
  .col-2 > .col-4,
  .col-2 > .col-5,
  .col-2 > .col-6,
  .col-2 > .col-7,
  .col-2 > .col-8,

  .col-3 > .col-1,
  .col-3 > .col-2,
  .col-3 > .col-3,
  .col-3 > .col-4,
  .col-3 > .col-5,
  .col-3 > .col-6,
  .col-3 > .col-7,

  .col-4 > .col-1,
  .col-4 > .col-2,
  .col-4 > .col-3,
  .col-4 > .col-4,
  .col-4 > .col-5,
  .col-4 > .col-6,

  .col-5 > .col-1,
  .col-5 > .col-2,
  .col-5 > .col-3,
  .col-5 > .col-4,
  .col-5 > .col-5,

  .col-6 > .col-1,
  .col-6 > .col-2,
  .col-6 > .col-3,
  .col-6 > .col-4,

  .col-7 > .col-1,
  .col-7 > .col-2,
  .col-7 > .col-3,

  .col-8 > .col-1,
  .col-8 > .col-2,

  .col-9 > .col-1 {
    padding-left: 0;
    padding-right: 0;
  }

  .col-1 > .col-1 { width: 100% }
  .col-1 > .col-2 { width: calc(100% * 2 + 2rem) }
  .col-1 > .col-3 { width: calc(100% * 3 + 4rem) }
  .col-1 > .col-4 { width: calc(100% * 4 + 6rem) }
  .col-1 > .col-5 { width: calc(100% * 5 + 8rem) }
  .col-1 > .col-6 { width: calc(100% * 6 + 10rem) }
  .col-1 > .col-7 { width: calc(100% * 7 + 12rem) }
  .col-1 > .col-8 { width: calc(100% * 8 + 14rem) }
  .col-1 > .col-9 { width: calc(100% * 9 + 16rem) }

  .col-2 > .col-1 { width: calc(100% * 1/2 - 1rem) }
  .col-2 > .col-2 { width: 100% }
  .col-2 > .col-3 { width: calc(100% * 3/2 + 1rem) }
  .col-2 > .col-4 { width: calc(100% * 4/2 + 2rem) }
  .col-2 > .col-5 { width: calc(100% * 5/2 + 3rem) }
  .col-2 > .col-6 { width: calc(100% * 6/2 + 4rem) }
  .col-2 > .col-7 { width: calc(100% * 7/2 + 5rem) }
  .col-2 > .col-8 { width: calc(100% * 8/2 + 6rem) }
  .col-2 > .col-9 { width: calc(100% * 9/2 + 7rem) }

  .col-3 > .col-1 { width: calc((100% - 4rem) / 3) }
  .col-3 > .col-2 { width: calc((100% - 4rem) / 3 * 2 + 2rem) }
  .col-3 > .col-3 { width: 100% }
  .col-3 > .col-4 { width: calc((100% - 4rem) / 3 * 4 + 6rem) }
  .col-3 > .col-5 { width: calc((100% - 4rem) / 3 * 5 + 8rem) }
  .col-3 > .col-6 { width: calc(100% * 2 + 2rem) }
  .col-3 > .col-7 { width: calc((100% - 4rem) / 3 * 7 + 12rem) }
  .col-3 > .col-8 { width: calc((100% - 4rem) / 3 * 8 + 14rem) }
  .col-3 > .col-9 { width: calc((100% - 4rem) / 3 * 9 + 16rem) }

  .col-4 > .col-1 { width: calc((100% - 6rem) / 4) }
  .col-4 > .col-2 { width: calc(100% / 2 - 1rem) }
  .col-4 > .col-3 { width: calc((100% - 6rem) / 4 * 3 + 4rem ) }
  .col-4 > .col-4 { width: 100% }
  .col-4 > .col-5 { width: calc((100% - 6rem) / 4 * 5 + 8rem ) }
  .col-4 > .col-6 { width: calc(100% * 1.5 + 1rem) }
  .col-4 > .col-7 { width: calc((100% - 6rem) / 4 * 7 + 12rem ) }
  .col-4 > .col-8 { width: calc((100% - 6rem) / 4 * 8 + 14rem ) }
  .col-4 > .col-9 { width: calc((100% - 6rem) / 4 * 9 + 16rem ) }

  .col-5 > .col-1 { width: calc((100% - 8rem) / 5) }
  .col-5 > .col-2 { width: calc((100% - 8rem) / 5 * 2 + 2rem) }
  .col-5 > .col-3 { width: calc((100% - 8rem) / 5 * 3 + 4rem) }
  .col-5 > .col-4 { width: calc((100% - 8rem) / 5 * 4 + 6rem) }
  .col-5 > .col-5 { width: 100% }
  .col-5 > .col-6 { width: calc((100% - 8rem) / 5 * 6 + 10rem) }
  .col-5 > .col-7 { width: calc((100% - 8rem) / 5 * 7 + 12rem) }
  .col-5 > .col-8 { width: calc((100% - 8rem) / 5 * 8 + 14rem) }
  .col-5 > .col-9 { width: calc((100% - 8rem) / 5 * 9 + 16rem) }

  .col-6 > .col-1 { width: calc((100% - 10rem) / 6) }
  .col-6 > .col-2 { width: calc((100% - 10rem) / 6 * 2 + 2rem) }
  .col-6 > .col-3 { width: calc((100% - 10rem) / 6 * 3 + 4rem) }
  .col-6 > .col-4 { width: calc((100% - 10rem) / 6 * 4 + 6rem) }
  .col-6 > .col-5 { width: calc((100% - 10rem) / 6 * 5 + 8rem) }
  .col-6 > .col-6 { width: calc((100% - 10rem) / 6 * 6 + 10rem) }
  .col-6 > .col-7 { width: calc((100% - 10rem) / 6 * 7 + 12rem) }
  .col-6 > .col-8 { width: calc((100% - 10rem) / 6 * 8 + 14rem) }
  .col-6 > .col-9 { width: calc((100% - 10rem) / 6 * 9 + 16rem) }

  .col-7 > .col-1 { width: calc((100% - 12rem) / 7) }
  .col-7 > .col-2 { width: calc((100% - 12rem) / 7 * 2 + 2rem) }
  .col-7 > .col-3 { width: calc((100% - 12rem) / 7 * 3 + 4rem) }
  .col-7 > .col-4 { width: calc((100% - 12rem) / 7 * 4 + 6rem) }
  .col-7 > .col-5 { width: calc((100% - 12rem) / 7 * 5 + 8rem) }
  .col-7 > .col-6 { width: calc((100% - 12rem) / 7 * 6 + 10rem) }
  .col-7 > .col-7 { width: calc((100% - 12rem) / 7 * 7 + 12rem) }
  .col-7 > .col-8 { width: calc((100% - 12rem) / 7 * 8 + 14rem) }
  .col-7 > .col-9 { width: calc((100% - 12rem) / 7 * 9 + 16rem) }

  .col-8 > .col-1 { width: calc((100% - 14rem) / 8) }
  .col-8 > .col-2 { width: calc((100% - 14rem) / 8 * 2 + 2rem) }
  .col-8 > .col-3 { width: calc((100% - 14rem) / 8 * 3 + 4rem) }
  .col-8 > .col-4 { width: calc((100% - 14rem) / 8 * 4 + 6rem) }
  .col-8 > .col-5 { width: calc((100% - 14rem) / 8 * 5 + 8rem) }
  .col-8 > .col-6 { width: calc((100% - 14rem) / 8 * 6 + 10rem) }
  .col-8 > .col-7 { width: calc((100% - 14rem) / 8 * 7 + 12rem) }
  .col-8 > .col-8 { width: calc((100% - 14rem) / 8 * 8 + 14rem) }
  .col-8 > .col-9 { width: calc((100% - 14rem) / 8 * 9 + 16rem) }

  .col-9 > .col-1 { width: calc((100% - 16rem) / 9) }
  .col-9 > .col-2 { width: calc((100% - 16rem) / 9 * 2 + 2rem) }
  .col-9 > .col-3 { width: calc((100% - 16rem) / 9 * 3 + 4rem) }
  .col-9 > .col-4 { width: calc((100% - 16rem) / 9 * 4 + 6rem) }
  .col-9 > .col-5 { width: calc((100% - 16rem) / 9 * 5 + 8rem) }
  .col-9 > .col-6 { width: calc((100% - 16rem) / 9 * 6 + 10rem) }
  .col-9 > .col-7 { width: calc((100% - 16rem) / 9 * 7 + 12rem) }
  .col-9 > .col-8 { width: calc((100% - 16rem) / 9 * 8 + 14rem) }
  .col-9 > .col-9 { width: calc((100% - 16rem) / 9 * 9 + 16rem) }

  /* GROW */
  .col-1 > .grow,
  .col-2 > .grow,
  .col-3 > .grow,
  .col-4 > .grow,
  .col-5 > .grow,
  .col-6 > .grow,
  .col-7 > .grow,
  .col-8 > .grow,
  .col-9 > .grow {
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: content-box;
  }

  .col-1 > .grow.grow-left-1 { margin-left: calc(-100% - 3rem) }
  .col-1 > .grow.grow-left-2 { margin-left: calc(-200% - 5rem) }
  .col-1 > .grow.grow-left-3 { margin-left: calc(-300% - 7rem) }
  .col-1 > .grow.grow-left-4 { margin-left: calc(-400% - 9rem) }
  .col-1 > .grow.grow-left-5 { margin-left: calc(-500% - 11rem) }
  .col-1 > .grow.grow-left-6 { margin-left: calc(-600% - 13rem) }
  .col-1 > .grow.grow-left-7 { margin-left: calc(-700% - 15rem) }
  .col-1 > .grow.grow-left-8 { margin-left: calc(-800% - 17rem) }
  .col-1 > .grow.grow-left-9 { margin-left: calc(-900% - 19rem) }

  .col-2 > .grow.grow-left-1 { margin-left: calc(-50% - 2rem) }
  .col-2 > .grow.grow-left-2 { margin-left: calc(-100% - 3rem) }
  .col-2 > .grow.grow-left-3 { margin-left: calc(-150% - 4rem) }
  .col-2 > .grow.grow-left-4 { margin-left: calc(-200% - 5rem) }
  .col-2 > .grow.grow-left-5 { margin-left: calc(-250% - 6rem) }
  .col-2 > .grow.grow-left-6 { margin-left: calc(-300% - 7rem) }
  .col-2 > .grow.grow-left-7 { margin-left: calc(-350% - 8rem) }
  .col-2 > .grow.grow-left-8 { margin-left: calc(-400% - 9rem) }

  .col-3 > .grow.grow-left-1 { margin-left: calc(-100% / 3 - 2rem / 3 - 1rem) }
  .col-3 > .grow.grow-left-2 { margin-left: calc(-100% / 3 * 2 - 4rem / 3 - 1rem) }
  .col-3 > .grow.grow-left-3 { margin-left: calc(-100% / 3 * 3 - 3rem) }
  .col-3 > .grow.grow-left-4 { margin-left: calc(-100% / 3 * 4 - 8rem / 3 - 1rem) }
  .col-3 > .grow.grow-left-5 { margin-left: calc(-100% / 3 * 5 - 10rem / 3 - 1rem) }
  .col-3 > .grow.grow-left-6 { margin-left: calc(-100% / 3 * 6 - 5rem) }
  .col-3 > .grow.grow-left-7 { margin-left: calc(-100% / 3 * 7 - 14rem / 3 - 1rem) }

  .col-4 > .grow.grow-left-1 { margin-left: calc(-25% - 1.5rem) }
  .col-4 > .grow.grow-left-2 { margin-left: calc(-50% - 2rem) }
  .col-4 > .grow.grow-left-3 { margin-left: calc(-75% - 2.5rem) }
  .col-4 > .grow.grow-left-4 { margin-left: calc(-100% - 3rem) }
  .col-4 > .grow.grow-left-5 { margin-left: calc(-125% - 3.5rem) }
  .col-4 > .grow.grow-left-6 { margin-left: calc(-150% - 4rem) }

  .col-5 > .grow.grow-left-1 { margin-left: calc(-20% - 1.4rem) }
  .col-5 > .grow.grow-left-2 { margin-left: calc(-40% - 1.8rem) }
  .col-5 > .grow.grow-left-3 { margin-left: calc(-60% - 2.2rem) }
  .col-5 > .grow.grow-left-4 { margin-left: calc(-80% - 2.6rem) }
  .col-5 > .grow.grow-left-5 { margin-left: calc(-100% - 3rem) }

  .col-6 > .grow.grow-left-1 { margin-left: calc(-100% / 6 - 2rem / 6 - 1rem) }
  .col-6 > .grow.grow-left-2 { margin-left: calc(-100% / 6 * 2 - 4rem / 6 - 1rem) }
  .col-6 > .grow.grow-left-3 { margin-left: calc(-100% / 6 * 3 - 2rem) }
  .col-6 > .grow.grow-left-4 { margin-left: calc(-100% / 6 * 4 - 8rem / 6 - 1rem) }

  .col-7 > .grow.grow-left-1 { margin-left: calc(-100% / 7 - 2rem / 7 - 1rem) }
  .col-7 > .grow.grow-left-2 { margin-left: calc(-100% / 7 * 2 - 4rem / 7 - 1rem) }
  .col-7 > .grow.grow-left-3 { margin-left: calc(-100% / 7 * 3 - 6rem / 7 - 1rem) }

  .col-8 > .grow.grow-left-1 { margin-left: calc(-12.5% - 1.25rem) }
  .col-8 > .grow.grow-left-2 { margin-left: calc(-25% - 1.5rem) }

  .col-9 > .grow.grow-left-1 { margin-left: calc(-100% / 9 - 2rem / 9 - 1rem) }

  .col-1 > .grow.grow-right-1 {
    margin-right: calc(-100% - 1 * 2rem - 1rem);
    margin-left: -1rem;
  }
  .col-1 > .grow.grow-right-2 {
    margin-right: calc(-100% * 2 - 2 * 2rem - 1rem);
    margin-left: -1rem;
  }
  .col-1 > .grow.grow-right-3 {
    margin-right: calc(-100% * 3 - 3 * 2rem - 1rem);
    margin-left: -1rem;
  }
  .col-1 > .grow.grow-right-4 {
    margin-right: calc(-100% * 4 - 4 * 2rem - 1rem);
    margin-left: -1rem;
  }
  .col-1 > .grow.grow-right-5 {
    margin-right: calc(-100% * 5 - 5 * 2rem - 1rem);
    margin-left: -1rem;
  }
  .col-1 > .grow.grow-right-6 {
    margin-right: calc(-100% * 6 - 6 * 2rem - 1rem);
    margin-left: -1rem;
  }
  .col-1 > .grow.grow-right-7 {
    margin-right: calc(-100% * 7 - 7 * 2rem - 1rem);
    margin-left: -1rem;
  }
  .col-1 > .grow.grow-right-8 {
    margin-right: calc(-100% * 8 - 8 * 2rem - 1rem);
    margin-left: -1rem;
  }
  .col-1 > .grow.grow-right-9 {
    margin-right: calc(-100% * 9 - 9 * 2rem - 1rem);
    margin-left: -1rem;
  }

  .col-2 > .grow.grow-right-1 {
    margin-right: calc(-100% / 2 - 2rem / 2 - 1rem);
    margin-left: -1rem;
  }
  .col-2 > .grow.grow-right-2 {
    margin-right: calc(-100% / 2 * 2 - 2 * 2rem / 2 - 1rem);
    margin-left: -1rem;
  }
  .col-2 > .grow.grow-right-3 {
    margin-right: calc(-100% / 2 * 3 - 3 * 2rem / 2 - 1rem);
    margin-left: -1rem;
  }
  .col-2 > .grow.grow-right-4 {
    margin-right: calc(-100% / 2 * 4 - 4 * 2rem / 2 - 1rem);
    margin-left: -1rem;
  }
  .col-2 > .grow.grow-right-5 {
    margin-right: calc(-100% / 2 * 5 - 5 * 2rem / 2 - 1rem);
    margin-left: -1rem;
  }
  .col-2 > .grow.grow-right-6 {
    margin-right: calc(-100% / 2 * 6 - 6 * 2rem / 2 - 1rem);
    margin-left: -1rem;
  }
  .col-2 > .grow.grow-right-7 {
    margin-right: calc(-100% / 2 * 7 - 7 * 2rem / 2 - 1rem);
    margin-left: -1rem;
  }
  .col-2 > .grow.grow-right-8 {
    margin-right: calc(-100% / 2 * 8 - 8 * 2rem / 2 - 1rem);
    margin-left: -1rem;
  }

  .col-3 > .grow.grow-right-1 {
    margin-right: calc(-100% / 3 - 2rem / 3 - 1rem);
    margin-left: -1rem;
  }
  .col-3 > .grow.grow-right-2 {
    margin-right: calc(-100% / 3 * 2 - 2 * 2rem / 3 - 1rem);
    margin-left: -1rem;
  }
  .col-3 > .grow.grow-right-3 {
    margin-right: calc(-100% / 3 * 3 - 3 * 2rem / 3 - 1rem);
    margin-left: -1rem;
  }
  .col-3 > .grow.grow-right-4 {
    margin-right: calc(-100% / 3 * 4 - 4 * 2rem / 3 - 1rem);
    margin-left: -1rem;
  }
  .col-3 > .grow.grow-right-5 {
    margin-right: calc(-100% / 3 * 5 - 5 * 2rem / 3 - 1rem);
    margin-left: -1rem;
  }
  .col-3 > .grow.grow-right-6 {
    margin-right: calc(-100% / 3 * 6 - 6 * 2rem / 3 - 1rem);
    margin-left: -1rem;
  }
  .col-3 > .grow.grow-right-7 {
    margin-right: calc(-100% / 3 * 7 - 7 * 2rem / 3 - 1rem);
    margin-left: -1rem;
  }

  .col-4 > .grow.grow-right-1 {
    margin-right: calc(-100% / 4 - 2rem / 4 - 1rem);
    margin-left: -1rem;
  }
  .col-4 > .grow.grow-right-2 {
    margin-right: calc(-100% / 4 * 2 - 2 * 2rem / 4 - 1rem);
    margin-left: -1rem;
  }
  .col-4 > .grow.grow-right-3 {
    margin-right: calc(-100% / 4 * 3 - 3 * 2rem / 4 - 1rem);
    margin-left: -1rem;
  }
  .col-4 > .grow.grow-right-4 {
    margin-right: calc(-100% / 4 * 4 - 4 * 2rem / 4 - 1rem);
    margin-left: -1rem;
  }
  .col-4 > .grow.grow-right-5 {
    margin-right: calc(-100% / 4 * 5 - 5 * 2rem / 4 - 1rem);
    margin-left: -1rem;
  }
  .col-4 > .grow.grow-right-6 {
    margin-right: calc(-100% / 4 * 6 - 6 * 2rem / 4 - 1rem);
    margin-left: -1rem;
  }

  .col-5 > .grow.grow-right-1 {
    margin-right: calc(-100% / 5 - 2rem / 5 - 1rem);
    margin-left: -1rem;
  }
  .col-5 > .grow.grow-right-2 {
    margin-right: calc(-100% / 5 * 2 - 2 * 2rem / 5 - 1rem);
    margin-left: -1rem;
  }
  .col-5 > .grow.grow-right-3 {
    margin-right: calc(-100% / 5 * 3 - 3 * 2rem / 5 - 1rem);
    margin-left: -1rem;
  }
  .col-5 > .grow.grow-right-4 {
    margin-right: calc(-100% / 5 * 4 - 4 * 2rem / 5 - 1rem);
    margin-left: -1rem;
  }
  .col-5 > .grow.grow-right-5 {
    margin-right: calc(-100% / 5 * 5 - 5 * 2rem / 5 - 1rem);
    margin-left: -1rem;
  }

  .col-6 > .grow.grow-right-1 {
    margin-right: calc(-100% / 6 - 2rem / 6 - 1rem);
    margin-left: -1rem;
  }
  .col-6 > .grow.grow-right-2 {
    margin-right: calc(-100% / 6 * 2 - 2 * 2rem / 6 - 1rem);
    margin-left: -1rem;
  }
  .col-6 > .grow.grow-right-3 {
    margin-right: calc(-100% / 6 * 3 - 3 * 2rem / 6 - 1rem);
    margin-left: -1rem;
  }
  .col-6 > .grow.grow-right-4 {
    margin-right: calc(-100% / 6 * 4 - 4 * 2rem / 6 - 1rem);
    margin-left: -1rem;
  }

  .col-7 > .grow.grow-right-1 {
    margin-right: calc(-100% / 7 - 2rem / 7 - 1rem);
    margin-left: -1rem;
  }
  .col-7 > .grow.grow-right-2 {
    margin-right: calc(-100% / 7 * 2 - 2 * 2rem / 7 - 1rem);
    margin-left: -1rem;
  }
  .col-7 > .grow.grow-right-3 {
    margin-right: calc(-100% / 7 * 3 - 3 * 2rem / 7 - 1rem);
    margin-left: -1rem;
  }

  .col-8 > .grow.grow-right-1 {
    margin-right: calc(-100% / 8 - 2rem / 8 - 1rem);
    margin-left: -1rem;
  }
  .col-8 > .grow.grow-right-2 {
    margin-right: calc(-100% / 8 * 2 - 2 * 2rem / 8 - 1rem);
    margin-left: -1rem;
  }

  .col-9 > .grow.grow-right-1 {
    margin-right: calc(-100% / 9 - 2rem / 9 - 1rem);
    margin-left: -1rem;
  }
}

.grow {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
}
@media (max-width: 60em) {
  .grow.self-end,
  .grow.self-start,
  .grow.self-center {
    width: 100%;
  }
}

/* ALIGNMENT */

.align-start { align-items: flex-start }
.align-center { align-items: center }
.align-end { align-items: flex-end }
.align-baseline { align-items: baseline }
.align-around { align-items: space-around }
.align-between { align-items: space-between }
.align-stretch { align-items: stretch }

.justify-start { justify-content: flex-start }
.justify-center { justify-content: center }
.justify-end { justify-content: flex-end }
.justify-baseline { justify-content: baseline }
.justify-around { justify-content: space-around }
.justify-between { justify-content: space-between }

.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-baseline { align-self: baseline; }

.rows { flex-direction: row }
.columns { flex-direction: column; }

@media (max-width: 60rem) {
  .mobile-left { margin-right: auto; }
  .mobile-center { margin-left: auto; margin-right: auto; }
  .mobile-right { margin-left: auto; }

  .mobile-align-start { align-items: flex-start }
  .mobile-align-center { align-items: center }
  .mobile-align-end { align-items: flex-end }
  .mobile-align-baseline { align-items: baseline }
  .mobile-align-around { align-items: space-around }
  .mobile-align-between { align-items: space-between }

  .mobile-justify-start { justify-content: flex-start }
  .mobile-justify-center { justify-content: center }
  .mobile-justify-end { justify-content: flex-end }
  .mobile-justify-baseline { justify-content: baseline }
  .mobile-justify-around { justify-content: space-around }
  .mobile-justify-between { justify-content: space-between }

  .mobile-self-start    { align-self: flex-start; }
  .mobile-self-end      { align-self: flex-end; }
  .mobile-self-center   { align-self: center; }
  .mobile-self-baseline { align-self: baseline; }

  .mobile-rows { flex-direction: row }
  .mobile-columns { flex-direction: column; }

  .mobile-above-1 { padding-top: 1rem }
  .mobile-above-2 { padding-top: 2rem }
  .mobile-above-3 { padding-top: 3rem }
  .mobile-above-4 { padding-top: 4rem }
  .mobile-above-5 { padding-top: 5rem }
  .mobile-above-6 { padding-top: 6rem }
  .mobile-above-7 { padding-top: 7rem }
  .mobile-above-8 { padding-top: 8rem }
  .mobile-above-9 { padding-top: 9rem }
  .mobile-above-10 { padding-top: 10rem }

  .mobile-below-1 { padding-bottom: 1rem }
  .mobile-below-2 { padding-bottom: 2rem }
  .mobile-below-3 { padding-bottom: 3rem }
  .mobile-below-4 { padding-bottom: 4rem }
  .mobile-below-5 { padding-bottom: 5rem }
  .mobile-below-6 { padding-bottom: 6rem }
  .mobile-below-7 { padding-bottom: 7rem }
  .mobile-below-8 { padding-bottom: 8rem }
  .mobile-below-9 { padding-bottom: 9rem }
  .mobile-below-10 { padding-bottom: 10rem }
}

/* TYPO */

.typo {
  font-size: 1rem;
}

.typo > *:first-child {
  margin-top: 0;
}

.typo > h1 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 2.625rem;
  line-height: 3rem;
}
.typo > h2 {
  margin-top: 3rem;
  margin-bottom: 0.75rem;
  font-size: 1.625rem;
  line-height: 2rem;
}
.typo > h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
}
.typo > h4 {
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5rem;
}
.typo > h5,
.typo > h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  line-height: 1rem;
}
.typo > h5 {
  text-transform: uppercase;
}

.typo > p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.75rem;
}

.typo > blockquote {
  margin: 2rem 0 2rem;
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: bold;
}
.typo > blockquote > p {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 1rem;
  text-align: right;
  font-weight: normal;
}
.typo > blockquote > p::before {
  content: '— ';
}

.typo > ul,
.typo > ol {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
}
.typo > ul ul,
.typo > ol ol {
  margin: 0;
  padding: 0 0 0 1rem;
}
.typo > ul li,
.typo > ol li {
  line-height: 2rem;
}

.typo > pre {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
  margin-left: -1rem;
  margin-right: -1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  word-wrap: normal;
  overflow-y: hidden; /* hide vertical */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #f7f7f7;
  border-radius: 2px;
}
.typo > pre > code {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: Consolas, Monaco, Courier, monospace;
  font-feature-settings: "kern" 0, "liga" 0;
  word-break: inherit;
  word-wrap: normal;
  background-color: inherit;
  direction: ltr;
  text-align: left;
  white-space: pre;
  tab-size: 2;
  hyphens: none;
}
.typo > pre > code:before,
.typo > pre > code:after {
  display: none;
}

.typo code {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  font-family: Consolas, Monaco, Andale Mono, monospace;
  word-wrap: break-word;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}
.typo code:before,
.typo code:after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

.typo hr {
  height: 0.1rem;
  border: 0;
  background-color: #eee;
  margin-top: 2rem;
  margin-bottom: 2rem;
}