.g-imagegrid {
	*,  *:before,  *:after {
		@include box-sizing(border-box !important);
	}		
	.g-imagegrid-wrapper {
		@include display(flex);
		@include flex-flow(row wrap);
	    margin: -0.25rem;
	}
	.g-imagegrid-item {
	    @include flex(0 0 auto);
	    padding: 0.25rem;
	    width: 100%;
	    display: inline-block;
	    vertical-align: top;
	    &:hover {
	    	img {
	    		opacity: 0.25;
	    		@include transition(opacity 0.35s);
	    	}
		    .g-imagegrid-link:before {
		    	opacity: 1;
		    }	    	
	    }
	}  	
	.g-imagegrid-desc {
		margin: 1.5rem 0;
	}		
	.g-imagegrid-link {
	    display: block;
	    position: relative;
	    background: $accent-color-1;
	    border-radius: $border-radius;
	    overflow: hidden;
	    &:before {
	    	font-family: FontAwesome;
		    content: "\f002";
		    font-size: 1.25rem;
		    position: absolute;
		    top: 50%;
		    left: 50%;	    
		    margin-left: -7px;
		    margin-top: -13px;
		    z-index: 1;		 
		    opacity: 0;   	
	    }
	}
	.g-imagegrid-2cols {
		.g-imagegrid-item {
			width: 50%;
		}	
	}	
	.g-imagegrid-3cols {
		.g-imagegrid-item {
			width: 33.33333%;
		}	
	}
	.g-imagegrid-4cols {
		.g-imagegrid-item {
			width: 25%;
		}	
	}			
	.g-imagegrid-5cols {
		.g-imagegrid-item {
			width: 20%;
		}	
	}	  
}