.page-section__related-items{
	
	padding: 1.5rem 0 3rem;
	background: #f6f6f6;
	
	h2{
		margin-top:1.5rem;
		@include header-line-before();
	}
	
}

.related-item{
	
	position:relative;overflow:hidden;max-height:15em;padding-left:0;padding-right:0;border-radius:0.5rem;margin-top:1.5rem;background:$white;
    @include breakpoint(small only) {
		height: auto;
	}
	
	.image-wrapper{
		display:block;
		overflow:hidden;
		height:7.5rem;
		div{
			display:block;transition: all 1s ease;background-size: cover;width:100%;height:100%;
			@include animate();
		}
		
		@include breakpoint(small only){
			height:7rem;
		}
		
	}
	&:hover .lazy-load-image{transform:scale(1.1);}
	
	.text-wrapper{
		position:relative;
		left:0;
		right:0;
		bottom:0;
		display:block;
		padding:1em;
		background:$secondary-color;
		
		h4,
		p{
			color:$white;
			margin:0;
			font-size: 0.875em;
		}
		
	    @include breakpoint(small only) {
			height:4.5rem;
			padding:0.75rem;
			h4{
				text-align:center;
				.fa{display:none;}
			}
			p{
				display:none;
			}
		}
	}
	
	
	
    
   
	
	.hidden-button{position:absolute;top:0;left:0;right:0;height:100%;text-indent:-5000px;}
	
}


.page-section__related-items{

	.cell:nth-child(1) .text-wrapper{background:get-color-nec(0);}
	.cell:nth-child(2) .text-wrapper{background:get-color-nec(1);}
	.cell:nth-child(3) .text-wrapper{background:get-color-nec(2);}
	.cell:nth-child(4) .text-wrapper{background:get-color-nec(3);}
	.cell:nth-child(5) .text-wrapper{background:get-color-nec(4);}
	.cell:nth-child(6) .text-wrapper{background:get-color-nec(5);}
		
}