chrome/common/extensions/docs/static/sass/_pillar.scss

$panel-margin-right: 1.5em;

.pillar-content {
  h1 {
    font-size: $h1-font-size;
  }
  > .g-section {
    padding: 3em 0;

    &:not(:last-of-type) {
      border-bottom: $default-border;
    }
    > h2 {
      font-size: $h2-font-size;
      margin-bottom: 1.5em !important;
    }
  }
  .article-list {
    article {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding: 1.9em;
      background-color: $gray-light;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 3px rgba(0, 0, 0, 0.15);
      line-height: 1.5em;
      margin-bottom: $panel-margin-right;
      &.new::after {
        content: 'new';
        background: #2e82c9;
        position: absolute;
        @include transform(rotate(45deg));
        top: -4px;
        right: -20px;
        color: white;
        font-size: 0.9em;
        width: 60px;
        text-align: center;
        padding-top: 8px;
      }
      p {
        font-weight: 300;
      }
    }
  }

#further-resources .g-content {
  h2 {
    &::before {
      display: inline-block;
      content: '';
      background: url("../../images/further-resources-icons.svg") 0 50% no-repeat;
      width: 50px;
      height: 43px;
      background-size: cover;
      margin: auto;
      margin-bottom: 5px;
      vertical-align: middle;
    }
    &.school {
      &::before {
        background-position: 0 50%;
      }
    }
    &.chat {
      &::before {
        background-position: -54px 50%;
      }
    }
    &.puzzle {
      &::before {
        background-position: -108px 50%;
      }
    }
  }
}

  // Phone
  @media only screen and (max-width: $break-small)  { 
    > .g-section {
      padding: 2em 0;
    }
  }

  @media only screen and (min-width: $break-small)  { 
    .article-list {
      @include display-flex();
      @include flex-wrap(wrap);
      @include justify-content(space-between);
      @include align-items(stretch);      
      article {
        @include flex(auto);
        margin-right: $panel-margin-right;
        width: 45%;
        &:nth-child(2n),
        &:last-of-type {
          margin-right: 0;
          //max-width: 45%;
        }
      }
    }
  } 
  @media only screen and (min-width: $break-large) { 
    .article-list {
      article {
        width: 30%;
          &:nth-child(2n) {
          margin-right: $panel-margin-right;
        }
        &:nth-child(3n),
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}

// Layout overrides for browsers who don't support Flexbox flex wrap, namely, Firefox 25 to 28.
// Flexbox flex wrap might get support in Firefox 29. https://bugzilla.mozilla.org/show_bug.cgi?id=702508 
@supports (not (flex-wrap: wrap)) {
  .pillar-content {
    .article-list {
      display: block;
      article {
        @media only screen and (min-width: $break-small)  { 
          flex: none;
          float: left;
          width: 48%;
        }
        @media only screen and (min-width: $break-large) { 
          width: 31.8058%;
        }
      }
    }
  }
}  

// The following CSS (and matching HTML) was modified from what's on chrome.com: https://www.google.com/intl/en/chrome/devices/features/
.load-more-articles {
  @include clearfix;
  margin: 2em auto 0.3em;
  text-align: center;
  width: 100%;
  a,
  a:hover {
    color: $black;
    transition: opacity 0.3s ease 0s;
  }
}
.nav-arrow {
  background-size: 48px 48px;
  background: top center no-repeat;
  display: inline-block;
  opacity: 0.5;
  transition: opacity 0.3s ease 0s;
  padding-top: 50px;
}
.nav-arrow:hover {
  opacity: 1;
}
.down-arrow {
  background-image: url("../../images/down-arrow.png");
}