.gallery {
	--item-size: 12em; 

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--item-size), 1fr));
	gap: 1.5em;

	align-items: center;
	text-align: center;
	justify-items: center;

	margin: 1em 0;
}

.gallery-item {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	max-width: calc(var(--item-size) * 2);

	margin: 0.33em 0;
	padding: 1em;

	background-color: var(--col-background);
	border: 1px dotted var(--col-main-a075);
	border-radius: var(--corner-radius-big);
}

.item-image {
	display: flex;
	justify-content: center;

	width: var(--item-size);
	height: var(--item-size);

	filter: drop-shadow(0 0 0.25em var(--col-main));
	
	transition: var(--transition-speed-medium);

	img {
		object-fit: contain;
		max-width: 100%;
		max-height: 100%;
	}

	&:hover {
		filter: drop-shadow(0 0 0.33em var(--col-highlight));

		transform: scale(1.0275);
	}
}
.gallery-item a,
.gallery-item .no-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 0.33em;
}
.gallery-item a:last-child {
	display: inline;
}
.gallery-item hr {
	width: 100%;
}

.pics-number::before {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 50%;
	content: '⁅☁⁆　 　';
	letter-spacing: -0.7em;
}

/* --- */

.image-panel {
	display: grid;
	grid-template-columns: auto 65%;
	gap: 0.5em;
	align-items: center;
}
@media (orientation: portrait) {
	.image-panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
}

/* PICTURE VIEWER */

.picture-viewer {
	display: flex;
	flex-direction: column;

	background-color: var(--col-background);
	border: 1px dotted var(--col-main-a075);
	padding: 0.5em;
	border-radius: var(--corner-radius);
}
.viewer-zone {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.thumbnails-bar {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

/* Navigation buttons */
.viewer-nav {
	width: 3em;
	height: 6em;
	
	margin: 0.5em;

	border: 1px solid transparent;
	border-radius: var(--corner-radius);
	opacity: 0.5;

	transition: var(--transition-speed-medium);
}
@media (orientation: portrait) {
	.viewer-nav {
		width: 2em;
	}
}
.viewer-nav:hover {
	background-color: var(--col-highlight-dark);
	border-color: var(--col-main);
	opacity: 1.0;
	cursor: pointer;
}
.viewer-nav.prev::before {
	position: relative;
	left: 33%;
	top: 25%;
	font-size: 3em;
	content: '◀';
}
.viewer-nav.next::before {
	position: relative;
	left: 33%;
	top: 25%;
	font-size: 3em;
	content: '▶';
}
.thumbnails-bar .viewer-nav {
	font-size: 50%;
}

/* The current image */
.viewer-zone .img-container.current {
	--size: calc(1vmax / 1vmin * 15vw);

	border: 1px dotted transparent;
	
	transition: var(--transition-speed-medium);
}
@media (orientation: portrait) {
	.viewer-zone .img-container.current {
		--size: 50vw;
	}
}
.viewer-zone .img-container.current:hover {
	background-color: var(--col-highlight-dark);
	border-color: var(--col-main-a075);
	cursor: zoom-in;
}

/* Thumbnains */
.thumbnails-bar .img-container {
	--size: 8vw;

	padding: 0.25em;
	margin: 0.25em;

	border: 1px dashed var(--col-main-a075);

	transition: var(--transition-speed-fast);
}
@media (orientation: portrait) {
	.thumbnails-bar .img-container {
		--size: 12vw;
	}
}
.thumbnails-bar .img-container.active {
	background-color: var(--col-highlight-dark);
	border: 1px solid var(--col-main);
	box-shadow: 0 0 0.5em var(--col-main);
}
.thumbnails-bar .img-container:hover {
	background-color: var(--col-highlight-dark);
	border-color: var(--col-highlight);
	cursor: pointer;
}
.thumbnails-bar .img-container.active:hover {
	box-shadow: 0 0 0.5em var(--col-highlight);
}

/* --- */

.image-modal {
	display: flex;
	
	position: fixed;
	inset: 0;
	z-index: 1000;

	align-items: center;
	justify-content: center;

	background: black;
	
	visibility: hidden;
	opacity: 0;
	transition: var(--transition-speed-fast);
}
.image-modal.active {
	opacity: 1;
	visibility: visible;
}

.modal-content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	overflow: hidden;
}
#modal-image {
	display: block;
	object-fit: contain;
	max-width: 90vw;
	max-height: 90vh;
}

.modal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	font-size: 200%;

	width: 1.5em;
	height: 1.5em;
	
	background-color: rgba(255,255,255,0.15);
	border-radius: 50%;
	color: white;
	
	cursor: pointer;
	user-select: none;

	transition: var(--transition-speed-fast);
}
.modal-nav:hover {
	background-color: rgba(255,255,255,0.3);
}
.modal-prev { left: 2%; }
.modal-next { right: 2%; }

.modal-close {
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 150%;
	font-family: PublicPixel, 'Courier New', Courier, monospace;

	position: absolute;
	top: 0.5em;
	right: 0.5em;
	z-index: 10;

	padding: 0.15em 0.15em 0.25em 0.25em;

	background-color: var(--col-red);
	color: white;
	border-radius: var(--corner-radius);
	opacity: 0.5;
	
	cursor: pointer;

	transition: var(--transition-speed-fast);
}
.modal-close:hover {
	opacity: 1;
}