.woo-products {

	li {
		width: 100%;
	}
}

$columns: ( "2": calc(100% / 2), "3": calc(100% / 3), "4": calc(100% / 4), "5": calc(100% / 5), "6": calc(100% / 6));

// Desktop

@include lg-screen {

	@each $name, $value in $columns {

		.columns-#{$name} {

			.products li {
				width: $value;
			}
		}
	}
}

// Tablet

@include tablet-screen-only {

	@each $name, $value in $columns {

		.columns-md-#{$name} {

			.products li {
				width: $value;
			}
		}
	}
}

// Mobile

@include sm-screen {

	@each $name, $value in $columns {

		.columns-sm-#{$name} {

			.products li {
		 		width: $value;
		 	}
		}
	}

	// Set paddings for 2 columns layout

	.columns-sm-2 {

		.products li {
			
			&:nth-child(odd) {
			  	padding-right: 0.6rem;
			}

			&:nth-child(even) {
			  	padding-left: 0.6rem;
			}
	 	}
	}
}

// Double width

@include md-screen {

	.columns-2, 
	.columns-md-2 {

		.double_width {
			width: calc((100% / 2) * 2 - 1px);
		}
	}

	.columns-3, 
	.columns-md-3 {

		.double_width {
			width: calc((100% / 3) * 2 - 1px);
		}
	}

	.columns-4, 
	.columns-md-4 {

		.double_width {
			width: calc((100% / 4) * 2 - 1px);
		}
	}

	.columns-5, 
	.columns-md-5 {

		.double_width {
			width: calc((100% / 5) * 2 - 1px);
		}
	}

	.columns-6, 
	.columns-md-6 {

		.double_width {
			width: calc((100% / 6) * 2 - 1px);
		}
	}

	.columns-12 {

		.double_width {
			width: calc((100% / 12) * 2 - 1px);
		}
	}
}