.grid {
	@extend %flexcontainer;
	@include flexwrap(wrap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.block {
	@include flexblock(1);
	@include mediaquery(mobile-only) {
		@include flexblock(0 100%);
	}
}

body [class*="size-"] {
	@include flexblock-important(none);
	@include mediaquery(mobile-only) {
		@include flexblock-important(0 100%);
		width: auto !important;
	}
}

.size-1-2 {
	width: percentage(1/2) !important;
}

.size-1-3 {
	width: percentage(1/3) !important;
}

.size-1-4 {
	width: percentage(1/4) !important;
}

.size-1-5 {
	width: percentage(1/5) !important;
}

.size-1-6 {
	width: percentage(1/6) !important;
}

.size-1-7 {
	width: percentage(1/7) !important;
}

.size-1-8 {
	width: percentage(1/8) !important;
}

.size-1-9 {
	width: percentage(1/9) !important;
}

.size-1-10 {
	width: percentage(1/10) !important;
}

.size-1-11 {
	width: percentage(1/11) !important;
}

.size-1-12 {
	width: percentage(1/12) !important;
}

// Fix for Firefox until support is added in Firefox 28
@include mediaquery(mobile-only) {
	@supports not (flex-wrap: wrap) {
		.grid {
			display: block;
			@include flexwrap(inherit);
		}
		.block {
			display: block;
			@include flexblock(inherit);
		}
	}
}