.attr-list {
  @include clearfix;

  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: 1.5;

  li {
    width: 100%;
    padding: 0;
    margin-top: 0.5rem;

    // &:nth-of-type(2n-1) { background: $gray; }
    .attr-title {
      font-weight: $strong-font-weight;
      margin-right: 0.1em;
    }
  }

  &.separate-lines {
    .attr-title {
      display: block;
    }
  }
}

@each $size in $grid-sizes {
  $i: index($grid-sizes, $size);

  // Add a class of "split-$size" to get it to split at any width above that breakpoint
  // eg .split-sm
  @media (min-width: nth($grid-breakpoints-var, $i)) {
    .attr-list.split-#{$size} {
      @include make-row;

      li {
        @include make-col-ready;

        @include make-col(6);
      }
    }
  }

  // Add a class of "separate-lines-$size" to get it to split at any width below that breakpoint
  // eg .separate-lines-xl
  @media (max-width: nth($grid-breakpoints, $i)) {
    .attr-list.seperate-lines-#{$size} {
      li .attr-title {
        display: block;
      }
    }
  }
}
