// Permet tenir un grid responsive sense necessitat de "posar .row pel mig".

// Number of columns in the grid.
$grid-columns:              12 !default;

// Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         20px !default;

$grid-padding-left:  floor(($grid-gutter-width / 2));
$grid-padding-right: ceil(($grid-gutter-width / 2));

.grid-rows {
	margin-left: -$grid-padding-left;
	margin-right: -$grid-padding-right;
	padding-left: 0;
	padding-right: 0;
	@include clearfix;
}

.grid-break-cols {
	float: left;
	overflow: hidden;
}

@mixin include-grid-col() {
	float: left;
	position: relative;
	min-height: 1px;
	padding-left: $grid-padding-left;
	padding-right: $grid-padding-right;
}

.grid-col {
	@include include-grid-col;
	margin-bottom: 10px;
}

// Per si volem especificar el nùmero de columnes:
.grid-2cols {
	.grid-col {
		width: 50%;
	}

	.grid-break-2cols {
		clear: both;
	}
}

.grid-3cols {
	.grid-col {
		width: 33.3%;
	}

	.grid-break-3cols {
		clear: both;
	}
}

.grid-4cols {
	.grid-col {
		width: 25%;
	}

	.grid-break-4cols {
		clear: both;
	}
}

.grid-5cols {
	.grid-col {
		width: 20%;
	}

	.grid-break-5cols {
		clear: both;
	}
}

.grid-6cols {
	.grid-col {
		width: 16.6%;
	}

	.grid-break-6cols {
		clear: both;
	}
}

.grid-7cols {
	.grid-col {
		width: 14.2%;
	}

	.grid-break-7cols {
		clear: both;
	}
}

.grid-8cols {
	.grid-col {
		width: 12.5%;
	}

	.grid-break-8cols {
		clear: both;
	}
}
.grid-8cols {
	.grid-col {
		width: 12.5%;
	}

	.grid-break-8cols {
		clear: both;
	}
}

.grid-9cols {
	.grid-col {
		width: 11.1%;
	}

	.grid-break-9cols {
		clear: both;
	}
}

.grid-10cols {
	.grid-col {
		width: 10%;
	}

	.grid-break-10cols {
		clear: both;
	}
}

// Columnes "automàtiques" en funció de la mida de la pantalla (responsives)
.grid-cols {
	// xs: 1 columna
	.grid-col-xs {
		@include include-grid-col;
		width: percentage(12 / $grid-columns);
	}

	// sm: 2 columnes
	@media (min-width: $screen-sm-min) {
		.grid-col-sm {
			@include include-grid-col;
			width: percentage(6 / $grid-columns);
		}
	}

	@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
		.grid-break-sm {
			clear: both;
		}
	}

	// md: 3 columnes
	@media (min-width: $screen-md-min) {
		.grid-col-md {
			@include include-grid-col;
			width: percentage(4 / $grid-columns);
		}
	}

	@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
		.grid-break-md {
			clear: both;
		}
	}

	// lg: 4 columnes
	@media (min-width: $screen-lg-min) {
		.grid-col-lg {
			@include include-grid-col;
			width: percentage(3 / $grid-columns);
		}
	}

	@media (min-width: $screen-lg-min) {
		.grid-break-lg {
			clear: both;
		}
	}
}

.grid-image {
	.img-responsive {
		margin-left: auto;
		margin-right: auto;	
	}
}