/*  -----------------------------------------------------------------------------------------------
    Columns
    @package v.1.0.0
--------------------------------------------------------------------------------------------------- */

&.masonry--4col-bighd
{
	.wrapper
	{
		.masonry-panel
		{
			width: 100%;
			max-width: calc(100%/4 - 24px);
			
			@include media('<=huge')
			{
				max-width: calc(100%/3 - 21.3333333333px);
			}

			@include media('<=desktop')
			{
				max-width: calc(100%/2 - 16px);
			}

			@include media('<ads')
			{
				max-width: 100% ; 
			}
		}
	}
}

/* <fs_premium_only> */

$minimum_nr_of_columns: 2;
$maximum_nr_of_columns: 8;
$gutter: 32px;

@for $i from $minimum_nr_of_columns through $maximum_nr_of_columns 
{
	&.masonry--#{$i}col-bighd
	{
		.wrapper
		{
			.masonry-panel
			{
				$number_of_cols					: $i; 
				$number_of_cols_minus_one		: $i - 1;
				$column_width					: (100% / #{$number_of_cols});
				
				// final_width should be the result from: gutter * (num_of_cols - 1) / num_of cols;
				$item_1	: $gutter * $number_of_cols_minus_one;
				$item_2 : ($item_1 / $number_of_cols);
				
				$final_width			: calc(#{$column_width} - #{$item_2}); 
				
				width: 100%;
				max-width: $final_width;
				
				@include media('<=huge')
				{
					$number_of_cols		: 3; 
					$column_width		: (100% / #{$number_of_cols});
					
					$number_of_cols_minus_one : 2;
					$item_1	: $gutter * $number_of_cols_minus_one;
					$item_2 : ($item_1 / $number_of_cols);
					
					$final_width			: calc(#{$column_width} - #{$item_2}); 
					
					
					max-width: $final_width;
				}

				@include media('<=desktop')
				{
					$number_of_cols		: 2; 
					$column_width		: (100% / #{$number_of_cols});
					
					$number_of_cols_minus_one : 1;
					$item_1	: $gutter * $number_of_cols_minus_one;
					$item_2 : ($item_1 / $number_of_cols);
					
					$final_width			: calc(#{$column_width} - #{$item_2}); 
				
					
					max-width: $final_width;
				}

				@include media('<ads')
				{
					max-width: 100% !important; // lame
				}
			}
		}
	}
}

/* </fs_premium_only> */