.collab,
.community-channels {
  margin: $medium $tiny;

  @media screen and (min-width: $mobile) {
    margin: $large auto;
  }
}

.collab {
  h1 {
    margin-bottom: $small;
    text-align: center;

    @media screen and (min-width: $mobile) {
      margin-bottom: $large;
    }
  }

  .collab-graphic {
    @media screen and (min-width: $mobile) {
      @neat-span-columns 4;
      @neat-shift 1;
    }
  }

  p {
    margin-top: $medium;

    @media screen and (min-width: $mobile) {
      margin-top: 0;
      text-align: left;
      @neat-span-columns 5;
      @neat-shift 1;
    }

    @media screen and (min-width: $tablet) {
      margin-top: $medium;
    }
  }
}

.community-channels {
  padding-bottom: $xl;
  text-align: left;

  .section-label:not(:first-child) {
    margin-top: $large;
  }

  a {
    color: $darkGreen;
  }
}

.community-channels-list {
  margin-left: 0;

  li {
    list-style-type: none;
    margin-bottom: 24px;
  }

  a {
    display: block;
    font-weight: inherit;
    position: relative;

    &:focus,
    &:active,
    &:hover {
      &:before {
        display: block;
      }
    }

    &:before {
      display: none;
      content: '';
      position: absolute;
      width: 3px;
      height: 100%;
      background-color: $darkGreen;
      left: -16px;
    }
  }

  p {
    color: $grey;
    margin-bottom: 0;
  }
}