<commit_before>// =============================================
// Layout
// =============================================

.l-two-col-left,
.l-two-col-right,
.l-three-col {
	@include grid;
    @include grid-up;
}


// =============================================
// Left and right hand side
// =============================================

@include breakpoint($screen-sm) {
	.l-two-col-left,
	.l-two-col-right {
		.l-side {
			@include grid-col(25%);
            order: 1;
		}
		.l-body {
			@include grid-col(75%);
            order: 2;
		}
	}
}


// =============================================
// Right column
// =============================================

@include breakpoint($screen-sm) {
	.l-two-col-right {
		@include grid-reserve;
	}
}


// =============================================
// Three column
// =============================================

@include breakpoint($screen-sm) {
	.l-three-col {
		.l-side {
			@include grid-col(20%);
			order: 1;
		}
		.l-body {
			@include grid-col(60%);
			order: 2;
		}
		.l-side--right {
			order: 3;
		}
	}
}
<commit_msg>Adding l-gutter class to layout utility<commit_after>// =============================================
// Layout
// =============================================

.l-two-col-left,
.l-two-col-right,
.l-three-col {
	@include grid;
    @include grid-up;
}


// =============================================
// Layout gutter
// =============================================

.l-gutter {
	@include grid-gutter;
}


// =============================================
// Left and right hand side
// =============================================

@include breakpoint($screen-sm) {
	.l-two-col-left,
	.l-two-col-right {
		.l-side {
			@include grid-col(25%);
            order: 1;
		}
		.l-body {
			@include grid-col(75%);
            order: 2;
		}
	}
}


// =============================================
// Right column
// =============================================

@include breakpoint($screen-sm) {
	.l-two-col-right {
		@include grid-reserve;
	}
}


// =============================================
// Three column
// =============================================

@include breakpoint($screen-sm) {
	.l-three-col {
		.l-side {
			@include grid-col(20%);
			order: 1;
		}
		.l-body {
			@include grid-col(60%);
			order: 2;
		}
		.l-side--right {
			order: 3;
		}
	}
}

{'fraction_non_alphanumeric': 0.478057094162761, 'fraction_numerical': 0.011077971878994461, 'mean_word_length': 3.3161764705882355, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4128924', 'n_tokens_mistral': 822, 'n_tokens_neox': 719, 'n_words': 116}