#main-image-container {
	background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--galleryBG);
}

#main-image-container img {
	transition: opacity .5s;
}

#main-image-container.loading img {
	opacity: 0;
}

.zoom-popup img {
	opacity: 0;
	transition: opacity .75s;
}

.zoom-popup.loaded img {
	opacity: 1;
}

@media (min-width: 700px) {

.detail-image-container {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto 1fr;

}

#main-image-container {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}

#image-gallery {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	overflow-y: auto;
	height: 300px;
}

#image-gallery.sized {
	height: var(--galleryheight);
}

#image-gallery > div {
	margin: .2rem;
}

}