:root{
	--gallery-border-radius: 15px;
	--gallery-display-background: none;
	--gallery-display-shadow: inset 0 0 100px 0 #000;
	--gallery-images-background: #000a;
	--gallery-button-background: #0004;
}
.gallery{
	position: relative;
	width: 100%;
	height: 50vh;
	overflow: hidden;
	border-radius: var(--gallery-border-radius);
}
.gallery-display{
	width: 100%;
	height: 80%;
	display: flex;
	background: var(--gallery-display-background);
	box-shadow: var(--gallery-display-shadow);
	justify-content: center;
	align-items: center;
	padding: 5px;
}
.gallery-display img{
	border-radius: calc( var(--gallery-border-radius) - 5px);
	max-width: 100%;
	max-height: 100%;
}
.gallery-display:hover{ cursor: zoom-in; }
.gallery-description {
	position: absolute;
	bottom: 20%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 5px;
	border-radius: var(--gallery-border-radius);
	text-align: center;
	background: #0004;
	padding: 10px;
	backdrop-filter: blur(15px);

}
.gallery-description:empty{ display:none; }
.gallery-images{
	background: var(--gallery-images-background);
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
	height: 20%;
	scroll-behavior: smooth;
	position: relative;
}
.gallery-images img{
	min-width: 200px;
	width: 15%;
	cursor: pointer;
	object-fit: cover;
	margin: 5px 0px 5px 5px;
	border-radius: var(--gallery-border-radius);
	filter: brightness(0.8);
}
.gallery-images img:hover{
	filter: brightness(1.0);
}
.gallery-active-image {
	border: 3px solid gray;
	box-sizing: border-box;
}
.gallery-prev-button{ left:0; top: 35%; }
.gallery-next-button{ right:0; top: 35%; }
.gallery-prev-button, .gallery-next-button, .gallery-fullscreen-button {
	text-align: center;
	margin: 5px;
	position: absolute;
	height: 50px;
	width: 50px;
	z-index: 1;
	background: var(--gallery-button-background);
	border: 0px;
	cursor: pointer;
	backdrop-filter: blur(15px);
	border-radius: var(--gallery-border-radius);
}
.gallery-fullscreen-button{ right:0; top: 0; }
.easeload {
    opacity: 0;
    transition: opacity 2s ease;
}