Gridsystem

/*
 *	Mixins:
 */
 
 //make flex rows a bit easier:
@mixin flex-row( $equalize:stretch ){
    @include display(flex);
    @include flex-direction(row);
    @include align-items($equalize);
}

//make flex columns a bit easier:
@mixin flex-col( $equalize:stretch ){
    @include display(flex);
    @include flex-direction(column);
    @include align-items($equalize);
}

 
 
 /*
 *	Regular:
 */

.section:after{
	clear:both;
}

.row{
	@include flex-row();
	min-height:30px;

	.column{
		@include flex( 1 );
		margin-right:30px;

		img{
			max-width:100%;
			height:auto;
		}

		&:last-of-type{
			margin-right:0;
		}
	}

	&.sidebar-right{
		.column:first-of-type{
			@include flex( 2 );
		}
	}

	&.sidebar-left{
		.column:last-of-type{
			@include flex( 2 );
		}
	}
}

/*
 *	Responsive:
 */

@media only screen and (max-width:980px){

	.row{
		@include flex-flow( row wrap );
		
		&.four-columns, &.three-columns{
			.column{
				@include flex( 1 47% );
				margin-right:0;
				&:nth-child( even ){
					margin-left:5%;
				}
			}
		}	
	}
}


@media only screen and (max-width:768px){

	.row{
		.column{
			@include flex( 1 100% );
		}

		&.four-columns, &.three-columns, &.half-half{
			.column, .column:nth-child( odd ), .column:nth-child( even ){
				@include flex( 1 100% );
				margin-left:0;
				margin-right:0;
			}
		}
	}
}