.imgal-container {
	line-height: 0;
	-webkit-column-count: 4;
	-webkit-column-gap: 0;
	-moz-column-count: 4;
	-moz-column-gap: 0;
	column-count: 4;
	column-gap: 0
}

.imgal-img {
	width: 100%;
	height: auto;
	transition: filter .2s
}

.imgal-img:hover {
	-webkit-filter: opacity(80%);
	filter: opacity(80%);
	cursor: pointer
}

.imgal-modal {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #000;
	color: #fff;
	vertical-align: middle;
	height: 100vh;
	width: 100vw
}

#imgal-modal-close {
	display: inline;
	font-size: 2rem;
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	cursor: pointer
}

.imgal-modal-img {
	width: 100%;
	height: 100%;
	object-fit: contain
}

@media only screen and (max-width:768px) {
	.imgal-container {
		line-height: 0;
		-webkit-column-count: 2;
		-webkit-column-gap: 0;
		-moz-column-count: 2;
		-moz-column-gap: 0;
		column-count: 2;
		column-gap: 0
	}
}

@media only screen and (min-width:768px) {
	.imgal-container {
		line-height: 0;
		-webkit-column-count: 3;
		-webkit-column-gap: 0;
		-moz-column-count: 3;
		-moz-column-gap: 0;
		column-count: 3;
		column-gap: 0
	}
}

@media only screen and (min-width:992px) {
	.imgal-container {
		line-height: 0;
		-webkit-column-count: 4;
		-webkit-column-gap: 0;
		-moz-column-count: 4;
		-moz-column-gap: 0;
		column-count: 4;
		column-gap: 0
	}
}

@media only screen and (min-width:1200px) {
	.imgal-container {
		line-height: 0;
		-webkit-column-count: 4;
		-webkit-column-gap: 0;
		-moz-column-count: 4;
		-moz-column-gap: 0;
		column-count: 4;
		column-gap: 0
	}
}