@mixin grid_item( $cols ){
	width: ( 0% + (( 100 / $cols ) - 4 ));
	&:nth-child(#{$cols}) {
		@include clearfix;
	}
}

.grid {

	.grid-item {
		@include grid_item( 5 )
		margin: 0 2% 3%;
		display: inline-block;
		vertical-align: top;
		border-bottom: 0;
		position: relative;

		.thumbnail {
			@include animate();
			max-width: 100%;
		}

		.name {
			@include one_line_text;
			padding-top: 8px;
		}

		.secondary {
			@include one_line_text;
			padding-top: 2px;
			color: $secondary_grey;
		}

		.fa {
			font-size: 10px;
			padding-left: 4px;
		}

		&:hover{
			cursor: pointer;

			.thumbnail {
				opacity: 0.75;
			}
		}
	}

	&.category-grid {
		.grid-item {
			position: relative;

			.name {
				position: absolute;
				bottom: 15%;
				left: 0;
				right: 0;
				text-align: center;
				font-size: 14px;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
	}

	@include responsive( 2400px ){
		&.mini {
			.grid-item {
				@include grid_item( 3 )
			}			
		}
		&:not(.mini){
			.grid-item {
				@include grid_item( 5 )
			}
		}
	}

	@include responsive( 1200px ){
		&.mini {
			.grid-item {
				@include grid_item( 2 )
			}			
		}
		&:not(.mini){
			.grid-item {
				@include grid_item( 5 )
			}	
		}
	}

	@include responsive( 850px ){
		&.mini {
			.grid-item {
				@include grid_item( 2 )
			}			
		}
		&:not(.mini){
			.grid-item {
				@include grid_item( 4 )
			}	
		}
	}

	@include responsive( 650px ){
		&:not(.mini){
			.grid-item {
				@include grid_item( 3 )
			}	
		}
	}
}