@use "mixins/breakpoint";

// ==========================================================================
// 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 breakpoint.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 breakpoint.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%;
	}
}
