Iris/src/scss/components/_grid.scss

@mixin grid_item( $cols, $gap: 2% ){
	width: ( 0% + ( 100 / $cols ) - ( $gap * 2 ) + ( ( $gap * 2 ) / $cols ) );
	box-sizing: border-box;
	margin: 0 $gap 3%;

	&:nth-child(#{$cols}n-#{$cols}) {
		margin-right: 0;
		@include clearfix;
	}

	&:nth-child(#{$cols}n-#{$cols - 1}) {
		margin-left: 0;
	}
}

.grid {

	.grid-item {
		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( null, $bp_wide ){
			.grid-item {
				.name {
					font-size: 16px;
				}
			}
		}
	}

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

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

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

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