/* BEGIN: SECTION GALLERY --------------------------------------------------- */

#galeria {
	background-color: white;
	display: grid;
	gap: 4px;
	grid-template-columns: auto auto;
	min-height: auto;
	border-top: 4px solid white;
	border-bottom: 4px solid white;
}

#galeria > div {
	cursor: pointer;
	position: relative;
	width: 100%;
}

#galeria > div > img.slide {
	display: block;
	width: 100%;
}

#galeria > div > img.button {
	display: block;
	height: 3em;
	left: calc( 50% - 1.5em);
	position: absolute;
	width: 3em;
	top: calc( 50% - 1.5em);
	opacity: 0;
	transition: opacity var( --animation-duration ) ease-in-out;
}

#galeria > div:hover > img.button {
	opacity: 1;
}

@media screen and ( min-width: 720px ) {

	#galeria {
		grid-template-columns: auto auto auto;
	}

	#galeria > div:last-child {
		display: none;
	}

}

@media screen and ( min-width: 1280px ) {

	#galeria {
		grid-template-columns: auto auto auto auto;
	}

	#galeria > div:last-child {
		display: block;
	}

}

/* END: SECTION GALLERY ----------------------------------------------------- */


/* BEGIN: SLIDESHOW  ---------------------------------------------------------*/

#slideshow {
	background-color: rgba(0,0,0,0.0);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	transform: scale(0);
	transition: transform 0.5s, background-color 0.5s 0.5s;
/* 	transition: background-color 0.5s 0.25s; */
	z-index: 10;
	display: grid;
}

#slideshow.visible {
	background-color: rgba(0,0,0,0.75);
/* 	border: 4px solid white; */
	transform: scale(1);
}

	#slideshow > div {
		align-self: center;
		display: none;
		justify-self: center;
		position: absolute;
/* 		position: relative; */
		width: calc( 100vw - 2em );
		height: auto;
	}

	#slideshow > div > img.button {
		position: absolute;
		top: 1em;
		right: 1em;
	}

	#slideshow > div > img.slide {
		border: 4px solid white;
		display: block;
		width: calc( 100vw - 2em );
		height: auto
	}

	#slideshow > div.visible {
		display: block;
	}

@media screen and ( min-aspect-ratio: 4 / 3 ) {

	#slideshow > div {
		width: auto;
		height: calc( 100vh - 2em );
	}

	#slideshow > div > img.slide {
		width: auto;
		height: calc( 100vh - 2em );
	}

}




/* END: SLIDESHOW  -----------------------------------------------------------*/