/**
 * 1.	Maximum INNER width of the site set in pixels
 *
 * 2. 	Use a percentage of the viewport for the side gutter to scale it proportionally
 *    	Make sure this is not to small so you have some white space between the edge and the text,
 *    	but not to big also, otherwise you lose valuable real estate
 */

$grid-max-width:      			1440; 	/* 1 */
$grid-column-count:   			12;
$grid-gutter:         			4%; 		/* 2 */
$grid-column-width-px:   		($grid-max-width / $grid-column-count) * 1px;
$grid-column-width-percentage: 	percentage(($grid-max-width/$grid-column-count)/$grid-max-width);




// Some variables for calculating the grid with extra halve columns for setting a constrained area
// First and last column are split in 2 and the rest is a full column
//
//  -- Gutter --  |  1   |   2   |   3   |   4   |   5   |   6   |   7   |   8   |   9   |   10   |   12   |  -- Gutter --

$grid-main:	repeat($grid-column-count, minmax(0, #{$grid-column-width-px}));


/** "Split" columns, halve the size, double the number of columns
  ‖ 1a | 1b ‖ 2a | 2b ‖ 3a | 3b ‖ 4a | 4b ‖ 5a | 5b ‖ 6a | 6b ‖ 7a | 7b ‖ 8a | 8b ‖ 9a | 9b ‖ 10a | 10b ‖ 11a | 11b ‖ 12a | 12b ‖
*/
$grid-main--split-columns:	repeat(#{$grid-column-count * 2}, minmax(0, #{$grid-column-width-px / 2})); // Double number of columns, halve the size