sass-site/source/assets/stylesheets/components/_lists.scss

%reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

%horizontal-list {
  @extend %reset-list;

  li {
    display: inline-block;
    margin: {
      right: -2px;
      left:  $gutter-width;
    }

    &:first-child { margin-left: 0; }
  }
}

.tiled-list {
  @extend %reset-list;
  margin: 0 auto;

  @include at-breakpoint($screen-small) {
    @extend %clear-fix-screen-small;
    margin: 0 #{-$gutter-width / 2};
    max-width: none;

    li {
      float: left;
      width: 100 / 3 * 1%;
      padding: {
        right: $gutter-width;
         left: $gutter-width;
      }

      &:nth-child(3n+4) { clear: both; }

      li {
        float: none;
        width: auto;
        padding: {
          right: 0;
           left: 0;
        }
      }
    }
  }
}

%description-list {
  @include at-breakpoint($mobile-large) { dd { margin-left: 0; } }

  @include at-breakpoint($tablet-small) {
    @extend %table-layout-tablet-small;
    table-layout: fixed;
    text-align: left;

    dt,
    dd { @extend %table-layout-cell-baseline-tablet-small; }

    dt { padding-right: $gutter-width / 2; }
    dd { padding-left:  $gutter-width / 2; }
  }

  @include at-breakpoint($screen-small) {
    dt { width: 100 / 3 * 1%; }
  }
}