.col {
  margin-bottom: 1em;
  padding: 0 0.5rem;
}

.row {
  margin: 0 -0.5rem;
}

.core-guides {
  @media (min-width: 568px) {
    .row {
      @include display(flex);
    }

    .col {
      width: (100%/2);
      margin-bottom: 0;
    }
  }

  @media (min-width: 768px) {
    .col:nth-child(1) {
      width: (100%/3);
    }

    .col:nth-child(2) {
      width: (100%/3*2);

      ul {
        @include columns(10em 2);
      }
    }
  }
}

.external {
  @media (min-width: 768px) {
    .row {
      @include display(flex);
      @include flex-wrap(wrap);
    }

    .col {
      @include flex(3);

      &:nth-child(2) {
        @include flex(2);
      }

      &:nth-child(3) {
        @include flex(2);
      }
    }
  }
}