#contentWrapper{
	@extend %clearfix;
	margin: 32px 0 64px 0;
	min-height: 500px;

	@include add-grid(12);
	@include add-gutter(10.6%);
	@include add-gutter(5.3% at $mobile-m);
	//@include add-gutter(8.3% at $mobile-l);
	@include add-gutter(5.3% at $mobile-l);
	@include add-gutter(32px at $mobile-xl);
	@include add-gutter(32px at $desktop-s);
	//@include sgs-change('gutter styles', 'split');
	@include add-gutter-style('split');


	> div.grid-item{
		margin-bottom: 32px;
		overflow: hidden;
		@include box-sizing('border-box');
		@include float-span(12);

		@include breakpoint($mobile-m){
			@include float-span(6);
		}

		@include breakpoint($desktop-s){
			@include float-span(6);
		}
	}
}

.smallContent {
	@include grid-span(12, 1);
	@include box-sizing('border-box');

	@include breakpoint($mobile-xl) {
		@include grid-span(8, 3);
	}

	@include breakpoint($desktop-s){
		@include grid-span(6, 4);
	}

	margin-right: 0 !important;
	.inner {
		position: relative;
		@include box-shadow($std-box-shadow);
		padding: $content-padding;

		.inner{
			padding: 0;
			@include box-shadow(none);
		}
	}
	.headerImage{
		margin: -$content-padding;
		margin-bottom: $content-padding;
	}
}

.smallContentContainer {
	@include grid-span(12, 1);
	@include box-sizing('border-box');

	@include breakpoint($mobile-xl) {
		@include grid-span(8, 3);
	}

	@include breakpoint($desktop-s){
		@include grid-span(6, 4);
        clear:both !important;
	}
	> div {
		margin-bottom: 20px;
	}
	.inner {
		position: relative;
		@include box-shadow($std-box-shadow);
		padding: $content-padding;
	}
	.headerImage{
		margin: -$content-padding;
		margin-bottom: $content-padding;
	}


	.ce-intext.ce-right .ce-gallery,
	.ce-intext.ce-left .ce-gallery {
		width:100%;
		text-align:center;
		@include breakpoint($mobile-m) {
			width:49%;
		}
	}
	.ce-intext.ce-right .ce-gallery {
		margin-left:0;
		@include breakpoint($mobile-m) {
			margin-left: 20px;
		}
	}
	.producttile{
		margin-bottom: 32px;
		@include box-sizing('border-box');
		@include float-span(12);



		@include breakpoint($mobile-l){
			@include float-span(6);


		}

		@include breakpoint($mobile-xl){
			@include float-span(6);
		}
	}
}







.masonry,.equalHeights{
	clear: both;
	@extend %clearfix;

	.grid-item{
		margin-bottom: 32px;
		@include box-sizing('border-box');
		@include float-span(12);

		&.width-full{
			@include float-span(12);
		}

		&.width-double{
			@include float-span(12);
		}

		@include breakpoint($mobile-l){
			@include float-span(6);

			&.width-full{
				@include float-span(12);
			}

			&.width-double{
				@include float-span(6);
			}
		}

		@include breakpoint($mobile-xl){
			@include float-span(4);

			&.width-full{
				@include float-span(12);
			}

			&.width-double{
				@include float-span(6);
			}
		}

		@include breakpoint($desktop-s) {
			@include float-span(3);

			&.width-full{
				@include float-span(12);
			}

			&.width-double {
				@include float-span(6);
			}
		}
	}
}

.grid-2cols{
	clear: both;
	@extend %clearfix;

	> div{
		margin-bottom: 16px;
		@include box-sizing('border-box');
		@include float-span(12);

		@include breakpoint($mobile-m){
			@include float-span(6);
		}

		@include breakpoint($desktop-s){
			@include float-span(6);
		}
	}
}

.grid-3cols{
	clear: both;
	@extend %clearfix;
	> div{
		margin-bottom: 15px;
		@include box-sizing('border-box');
		@include float-span(6);

		@include breakpoint($mobile-m){
			@include float-span(4);
		}

		@include breakpoint($desktop-s){
			@include float-span(4);
		}
	}
}

.grid-4cols{
	clear: both;
	@extend %clearfix;
	> div{
		@include box-sizing('border-box');
		margin-bottom: 15px;
		@include float-span(12);

		@include breakpoint($mobile-m){
			@include float-span(6);
		}

		@include breakpoint($mobile-l){
			@include float-span(4);
		}

		@include breakpoint($desktop-s){
			@include float-span(3);
		}
	}
}

.inner{
	position: relative;
	padding: 16px;
	background: #FFF;
	@include box-shadow($std-box-shadow);

	&.grass{
		padding: 60px 16px 16px 16px;
	}

	&.viola{
		padding: 60px 16px 16px 16px;
	}

	&.yellow{
		padding: 60px 16px 16px 16px;
	}

	&.grass{
		padding: 60px 16px 16px 16px;
	}

	&.no-padding{
		padding: 0;
	}
}

.grouped-ces{
	@extend %clearfix;

	&.grid-item{
		margin-bottom: 0;
	}

	> div{
		margin-bottom: 32px;
		@include box-sizing('border-box');
		&:nth-child(2n + 1){
			padding-left: 0;
		}

		&:nth-child(2n + 2){
			padding-right: 0;
		}

		@include breakpoint($desktop-s){
			@include float-span(6);
		}
	}
}