.gallery {
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: -5px 10px;
	
	li {
		padding: 0;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		margin: 4px;
		box-sizing: border-box;
		width: 390px;
		height: 260px;

		a {
			display: block;
			width: 100%;
			height: 100%;
			transition: background .2s ease;

			&:hover {
				background: rgba(255,255,255,.3);
			}
		}
	}
}

.overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 999;
	display: none;
	background: #000;

	.close {
		position: absolute;
		top: 2.5%;
		right: 2.5%;
		font-size: 2em;
	}

	.close, .next, .prev {
		color: #fff;
		text-decoration: none;
		text-shadow: 0px 1px 1px #000;
		z-index: 9999;
	}

	.prev, .next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-size: 4em;
		text-align: center;
		display: none;
	}

	.prev {
		left: 2.5%;
	}

	.next {
		right: 2.5%;
	}

	img {
		margin: 0 auto;
		display: block;
		max-height: 100vh;
		max-width: 100vw; 
		object-fit: contain;
	}
	
	figure {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
}

.cache {
	display: none;
}

body.overlay-active {
	overflow: hidden;
	.overlay {
		display: block;
	}
}

.caption {
	background: linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%);
	color: #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	padding: 40px 0;
	margin: 0;
	z-index: 999;
}