Iris/src/scss/components/_grid.scss

.grid {

	.grid-item-wrapper {
		display: inline-block;
	}

	.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;
		}

		.source {
			color: $secondary_grey;
			padding-left: 2px;
		}

		&:hover{
			cursor: pointer;

			.thumbnail {
				opacity: 0.75;
			}
		}

		&:active,
		&:focus {
			.thumbnail {
				.image {
					margin: 2%;
					padding-bottom: 96%;
					width: 96%;
				}
			}
		}
	}

	&.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, 800px ){
		&.mini {
			.grid-item {
				@include grid_item( 2 )
			}			
		}
		&:not(.mini){
			.grid-item {
				@include grid_item( 4 )
			}	
		}
	}

	@include responsive( 799px, 500px ){
		&.mini{
			.grid-item {
				@include grid_item( 6 )
			}	
		}
		&:not(.mini){
			.grid-item {
				@include grid_item( 3 )
			}	
		}
	}

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