cardconjurer/gallery/gallery.css

#imageGallery {
	margin-top: 2rem;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
	grid-auto-rows: min-content;
	grid-gap: 1rem;
	justify-items: center;
	align-items: center;
}



.galleryCard {
	/*margin: 1rem;*/
	cursor: pointer;
	width: 375px;
	height: 525px;
	transition: 2s;
	text-align: center;
}
.galleryCard > img {
	z-index: 1;
	width: 100%;
	height: auto;
}
.galleryCard > div {
	opacity: 0;
	position: relative;
	top: -2rem;
	left: 0;
	z-index: -1;
}



.galleryHidden {
	opacity: 0;
}
.galleryVisible {
	opacity: 1;
}



.filterHidden {
	display: none;
}



#fullImageViewbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	backdrop-filter: brightness(40%) blur(8px);
	-webkit-backdrop-filter: brightness(40%) blur(8px);
	text-align: center;
	cursor: pointer;
}
#fullImageViewbox.visible {
	display: block;
}
#fullImageViewbox > img {
	position: fixed;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	object-fit: contain;
	width: calc(100vw - 2rem);
	height: calc(100vh - 2rem);
	animation-duration: 0.5s;
}
#fullImageViewbox.visible > img.visible {
	animation-name: previewIn;
}
#fullImageViewbox.visible > img:not(.visible) {
	animation-name: previewOut;
	animation-duration: 0.3s;
	transform: translate(-50%, calc(50% + 1rem));
}

@keyframes previewIn {
	from {transform: translate(-50%, calc(50% + 1rem));}
	to {transform: translate(-50%, -50%);}
}
@keyframes previewOut {
	from {transform: translate(-50%, -50%);}
	to {transform: translate(-50%, calc(50% + 1rem));}
}