:root {
  --columns: 7;
}

html, body {
	height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.gallery {
	--margin: 8px;
	--gap: 16px;
	--image-width: 250px;
	column-count: var(--columns);
	width: min-content;
	margin: auto;
}

.img-base {
	border-radius: 8px;
	filter: drop-shadow(0 0 8px rgba(0,0,0,0.75));
}

.gallery img {
	display: block;
	max-width: 100%;
	min-width: var(--image-width);
	transition: opacity 1.5s ease;
	cursor: pointer;
	vertical-align: top;
	margin-bottom: var(--gap);
}

.gallery img:hover {
	filter: drop-shadow(0 0 16px rgba(0,0,0,0.75));
	transform: scale(1.025);
}

img.full {
	position: fixed;
	z-index: 1;
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: grayscale(0%);
}

.full-cover {
	backdrop-filter: blur(10px);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.25);
	z-index: 1;
	display: none;
}

.full-cover--show {
  display: block;
}

.page-wrapper {
	flex: 1 0 auto;
}

footer {
	flex-shrink: 0;
}