// ==========================================================================
// Grid styles
// 12 column grid
// ==========================================================================

.j-row {
	width: 100%;
	margin: 0 auto;
	&:before,
	&:after {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}

.j-col {
	padding: 0.85em;
	width: 100%;
	float: left;
	position: relative;
}

// Small grid (Mobile first)
@media only screen {
	// .j-sm-1		{width: 8.33333%;}
	// .j-sm-2		{width: 16.66667%;}
	// .j-sm-3		{width: 25%;}
	// .j-sm-4		{width: 33.33333%;}
	.j-sm-5		{width: 41.66667%;}
	// .j-sm-6		{width: 50%;}
	.j-sm-7		{width: 58.33333%;}
	// .j-sm-8		{width: 66.66667%;}
	// .j-sm-9		{width: 75%;}
	// .j-sm-10	{width: 83.33333%;}
	// .j-sm-11	{width: 91.66667%;}
	.j-sm-12	{width: 100%;}
}

// Medium grid
// 530px and up
@include minbreakpoint(large-phone) {
	// .j-md-1		{width: 8.33333%;}
	// .j-md-2		{width: 16.66667%;}
	// .j-md-3		{width: 25%;}
	.j-md-4		{width: 33.33333%;}
	// .j-md-5		{width: 41.66667%;}
	.j-md-6		{width: 50%;}
	// .j-md-7		{width: 58.33333%;}
	.j-md-8		{width: 66.66667%;}
	// .j-md-9		{width: 75%;}
	// .j-md-10	{width: 83.33333%;}
	// .j-md-11	{width: 91.66667%;}
	.j-md-12	{width: 100%;}
}

// Large grid
// 782px and up
@include minbreakpoint(tablet) {
	// .j-lrg-1	{width: 8.33333%;}
	// .j-lrg-2	{width: 16.66667%;}
	// .j-lrg-3	{width: 25%;}
	.j-lrg-4	{width: 33.33333%;}
	.j-lrg-5	{width: 41.66667%;}
	.j-lrg-6	{width: 50%;}
	.j-lrg-7	{width: 58.33333%;}
	.j-lrg-8	{width: 66.66667%;}
	// .j-lrg-9	{width: 75%;}
	// .j-lrg-10	{width: 83.33333%;}
	// .j-lrg-11	{width: 91.66667%;}
	.j-lrg-12	{width: 100%;}
}