// WARNING : don't forget to prefix Flexbox for older browsers!

// config breakpoints (choose unit you prefer)
@tiny-screen			: 480px; // tiny screens media query (less than 480px)
@small-screen			: 768px; // screens between 481px and 768px
@medium-screen			: 1024px; // screens between 769px and 1024px
@large-screen			: 1280px; // screens between 1025px and 1280px

@gutter: 1em;
@number: 4; // for equal columns
@left: 2; // left side of uneven columns
@right: 1; // right side of uneven columns

// grid styles for container wich has a .grid(n,g) class
// n = number of columns (default = 4)
// g = gutter value (default = 1em)
// example : .grid-container { .grid(12, 10px); }

[class*="grid-"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: -@gutter;
}

[class*="grid-"] > * {
	flex: 0 0 auto;
	display: block; /* IE fix */
	width: ~'calc(100% * 1 / @{number} - @{gutter})';
	margin-left: @gutter;
}

 .grid(@number:@number, @gutter:@gutter) { 
 & > * {
	  width: ~'calc(100% * 1 / @{number} - @{gutter})';
	}
	& > .flexitem-double {
		width: ~'calc(100% * 2 / @{number} - @{gutter})';
	}
	& > .flexitem-first {
		order: -1;
	}
	@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
		& > * {
			width: ~'calc(100% * 1 / 2 - @{gutter})';
		}
		& > .flexitem-double {
			width: ~'calc(100% - @{gutter})';
		}
	}
	@media (max-width: @tiny-screen) {
		& > * {
			width: ~'calc(100% - @{gutter})';
		}
		& > .flexitem-double {
			width: ~'calc(100% - @{gutter})';
		}
	}
}


/* examples */

.grid-2 {
	.grid(2);
}

.grid-3 {
	.grid(3);
}

.grid-4 {
	.grid(4);
}

.grid-5 {
	.grid(5);
}

.grid-6 {
	.grid(6);
}

.grid-7 {
	.grid(7);
}

.grid-8 {
	.grid(8);
}

.grid-10 {
	.grid(10);
}

.grid-12 {
	.grid(12);
}

.grid-16 {
	.grid(16);
}

// grid styles for container wich has a .uneven-grid(l,r,g) class
// left = left ratio column (default = 2)
// right = right ratio column (default = 1)
// gutter (default = 1em)
// example : .grid-container { .uneven-grid(2, 1, 10px); }
 .uneven-grid(@left:@left, @right:@right, @gutter:@gutter) { 
	& > *:nth-child(odd) {
		@size: (@left / (@left + @right)) * 100%;
		width: ~'calc(@{size} - @{gutter})';
	}
	& > *:nth-child(even) {
		@size: (@right / (@left + @right)) * 100%;
		width: ~'calc(@{size} - @{gutter})';
	}
	@media (max-width: @tiny-screen) {
		& > *:nth-child(n) {
			width: ~'calc(100% - @{gutter})';
		}
	}
}


/* examples */

.grid-2-1 {
	.uneven-grid(2,1);
}

.grid-1-2 {
	.uneven-grid(1,2);
}

.grid-3-1 {
	.uneven-grid(3,1);
}

.grid-1-3 {
	.uneven-grid(1,3);
}

.grid-3-2 {
	.uneven-grid(3,2);
}

.grid-2-3 {
	.uneven-grid(2,3);
}

.grid-4-1 {
	.uneven-grid(4,1);
}

.grid-1-4 {
	.uneven-grid(1,4);
}


/* deco */
* {
  box-sizing: border-box;
}
body {
  margin: 20px;  
  font-family: helvetica, arial, sans-serif;
	font-size: 1em;
}

[class*="grid-"] > div  {  
  margin-bottom: 20px; 
	padding: 1em;
	border: .25em dotted goldenrod;
  color: #fff; 
  background-color: olivedrab;
}