@if $use-matrix == true {

	/*------------------------------------*\
		$MATRIX
	\*------------------------------------*/
	/**
	 * Create a grid of items out of a single list, e.g.:
	 *
	   <ul class="matrix  three-cols">
		   <li class=all-cols>Lorem</li>
		   <li>Ipsum <a href=#>dolor</a></li>
		   <li><a href=# class=matrix__link>Sit</a></li>
		   <li>Amet</li>
		   <li class=all-cols>Consectetuer</li>
	   </ul>
	 *
	 * Extend this object in your theme stylesheet.
	 *
	 * Demo: jsfiddle.net/inuitcss/Y2zrU
	 *
	 */
	.matrix {
		@extend .block-list;
		border-left-width: 1px;
		@extend .cf;

		> li {
			float: left;
			border-right-width: 1px;
			@if $global-border-box == false {
				@include vendor(box-sizing, border-box);
			}
		}
	}
	.matrix__link {
		@extend .block-list__link;
	}

	/**
	 * The `.multi-list` object is a lot like the `.matrix` object only without the
	 * blocky borders and padding.
	 *
	   <ul class="multi-list  four-cols">
		   <li>Lorem</li>
		   <li>Ipsum</li>
		   <li>Dolor</li>
		   <li>Sit</li>
	   </ul>
	 *
	 * Demo: jsfiddle.net/inuitcss/Y2zrU
	 *
	 */
	.multi-list {
		list-style: none;
		margin-left: 0;
		@extend .cf;
	}
	.multi-list > li {
		float: left;
	}

	/**
	 * Apply these classes alongside the `.matrix` or `.multi-list` classes on
	 * lists to determine how wide their columns are.
	 */
	.two-cols > li {
		width: 50%;
	}
	.three-cols > li {
		width: 33.333%;
	}
	.four-cols > li {
		width: 25%;
	}
	.five-cols > li {
		width: 20%;
	}
	/**
	 * Unfortunately we have to qualify this selector in order to bring its
	 * specificity above the `.[number]-cols > li` selectors above.
	 */
	.matrix > .all-cols,
	.multi-list > .all-cols {
		width: 100%;
	}

}

//endif
