body {
  margin: 0;
  padding: 0;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  background-color: #333333;
}

/* Image stack: mosaic at bottom, lens on top, default image hidden */
.image-stack {
	position: relative;
	height: 100vh;
	width: 100%;
	display: block;
	overflow: hidden;
}

.image-stack img.mosaic,
.image-stack img.default {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100vh; /* always fill viewport height */
	width: auto;
	object-fit: cover;
	display: block;
}

.image-stack img.default.hidden {
	display: none; /* keep default out of layout; script only uses its src */
}

.lens {
	position: absolute;
	pointer-events: none; /* allow mouse events to reach underlying image */
	box-shadow: 0 4px 12px rgba(0,0,0,0.35);
	border: 2px solid rgba(255,255,255,0.9);
  background-color: #333333;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover; /* will be overridden by inline style to exact pixel size */
	display: none; /* shown by script on hover */
	z-index: 2;
}

/* utility */
.hidden {
	display: none !important;
}