_helpers.scss

/**
 * Columns
 *
 */
@mixin columns( $columns, $wrapper_width: null, $grid_item_element: article ) {

	@if( $wrapper_width == null ) {
		$wrapper_width: $grid-max-width;
	}

	#{$grid_item_element} {
		float: left;
		margin-left: $grid-gutter / $wrapper_width * 100%;
		width: ( ( $wrapper_width - $grid-gutter * ( $columns - 1 ) ) / $columns ) / $wrapper_width * 100%;

		&:nth-of-type(#{$columns}n+1) {
			clear: both;
			margin-left: 0;
		}
	}

	@supports( grid-area: auto ) {
		display: grid;
		grid-column-gap: $grid-gutter;
		grid-template-columns: repeat( $columns, 1fr );

		#{$grid_item_element} {
			margin-left: 0;
			width: 100%;
		}

		header, nav, aside, footer {
			grid-column: 1 / -1;
		}
	}
}

/**
 * Columns, Mobile
 *
 */
@mixin columns-mobile( $columns, $wrapper_width: null, $grid_item_element: article ) {

	@include media("<tablet") {
		@include columns( $columns, $wrapper_width, $grid_item_element );
	}
}

/**
 * Columns, Tablet
 *
 */
@mixin columns-tablet( $columns, $wrapper_width: null, $grid_item_element: article ) {

	@include media(">=tablet", "<medium") {
		@include columns( $columns, $wrapper_width, $grid_item_element );
	}

}

/**
 * Columns, Tablet Up
 *
 */
@mixin columns-tablet-up( $columns, $wrapper_width: null, $grid_item_element: article ) {

	@include media(">=tablet") {
		@include columns( $columns, $wrapper_width, $grid_item_element );
	}

}

/**
 * Columns, Desktop
 *
 */
@mixin columns-desktop( $columns, $wrapper_width: null, $grid_item_element: article ) {
	@include media(">=medium") {
		@include columns( $columns, $wrapper_width, $grid_item_element );
	}
}