/* Gallery Image component CSS courtesy of Stockton University */

/* Block Style using FlexBox */		

.gallery-square {
	display: flex;
	flex-wrap: wrap;
}

.gallery-square.col-4 .grid-item img{
	height: 200px;
	width: 200px;
	position: relative;
	object-fit: cover;
}

.gallery-square.col-4 .grid-item p.caption {
	width: 200px;	
}	

.gallery-square.col-3 .grid-item img{
	height: 275px;
	width: 275px;
	position: relative;
	object-fit: cover;

}
.gallery-square.col-3 .grid-item p.caption {
	width: 275px;	
}	

.gallery-square.col-2 .grid-item img{
	height: 410px;
	width: 410px;
	position: relative;
	object-fit: cover;
}	


.gallery-square.col-2 .grid-item p.caption {
	width: 410px;	
}	

.gallery-square .grid-item img {

	height: 275px;
	width: 275px;
	object-fit: cover;
	margin: 10px 5px 0px 5px;
}

.gallery-square p.caption {
	margin: 0px 5px 0px 5px;
	text-align: center;
	color: #00467f;
	font-size: 1.125rem;
	line-height: 1.55;
	background-color: #f2f2f2;
}

@media (max-width: 470px) {
	.gallery-square.col-2 div,.gallery-square.col-3 div,.gallery-square.col-4 div {
		height: 150px;
		width: 150px;
	}
}	

/* Masonry Style using Magic Grid JS */	

.gallery-masonry .grid-item img {
	margin: 10px 5px 0px 5px;
}

.gallery-masonry.col-4 .grid-item img, .gallery-masonry.col-4 .grid-item .caption {

	width: 210px;
	height: auto;
}	


.gallery-masonry.col-3 .grid-item img, .gallery-masonry.col-3 .grid-item .caption {

	width: 280px;
	height: auto;
}	


.gallery-masonry.col-2 .grid-item img, .gallery-masonry.col-2 .grid-item .caption {

	width: 415px;
	height: auto;
}		

.gallery-masonry p.caption {
	margin: 0px 5px 0px 5px;
	text-align: center;
	color: #00467f;
	font-size: 1.125rem;
	line-height: 1.55;
	background-color: #f2f2f2;
}

/* Masonry Style using CSS Columns 
Use this CSS if you don't want to integrate Magic Grid JS
*/			

/*	
.gallery-masonry.col-2 {
column-count: 2;
}

.gallery-masonry.col-3 {
column-count: 3;
}	

.gallery-masonry.col-4 {
column-count: 4;
}	

@media (max-width: 980px) {
.gallery-masonry.col-4  {
column-count: 3;
}	
}
@media (max-width: 768px) {
.gallery-masonry.col-2,.gallery-masonry.col-3,.gallery-masonry.col-4  {
column-count: 2;
}	
}	

*/