Iris/src/scss/components/_grid.scss

.grid {

	padding: 40px 20px;

	.grid-item {
		width: 16%;
		margin: 0 2% 3%;
		display: inline-block;
		vertical-align: top;
		border-bottom: 0;

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

		&:nth-child(5) {
			@include clearfix;
		}

		&:hover{
			cursor: pointer;

			.thumbnail {
				opacity: 0.75;
			}
		}

		@include responsive( 850px ){
			width: 21%;
		}

		@include responsive( 650px ){
			width: 29.3334%;
		}
	}

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