.lightbox {
	--lightbox-padding: 1rem;
	display: none;
	position: fixed;
	z-index: 9999;
	inset: 0;
	padding: var(--lightbox-padding);
	margin: 0;
	border: none;
	background-color: var(--color-white);
	overflow: hidden;
	height: 100dvh;
	grid-template-columns: 64px 1fr 64px;
	grid-template-rows: 24px 1fr 24px;
	grid-template-areas: 
		".       figure    close"
		"prev    figure     next"
		"counter figure download";
}
.lightbox:target {
	display: grid;
}
.lightbox figure {
	grid-area: figure;
	padding: 0;
	margin: 0;
	width: 100%;
	height: calc(100vh - var(--lightbox-padding) * 2);
	height: calc(100dvh - var(--lightbox-padding) * 2);
	display: grid;
	place-items: center;
	gap: 1rem;
	grid-template-rows: 1fr auto;
}
.lightbox figure img {
	object-fit: contain;
	height: auto;
	max-height: 82.5vh;
	width: 100%;
	max-width: calc(100vw - var(--space-sm-lg) * 2 + 28px * 2);
}
.lightbox figcaption {
	text-align: center;
	max-width: min(120ch, 100vw - 280px);
}
.lightbox .download {
	grid-area: download;
	justify-self: end;
}
.lightbox .close,
.lightbox .prev,
.lightbox .next {
	border-radius: 50%;
}
.lightbox .close,
.lightbox .prev,
.lightbox .next,
.lightbox .counter,
.lightbox .download {
	width: fit-content;
	color: var(--color-gray);
}
.lightbox .prev:hover,
.lightbox .next:hover,
.lightbox .close:hover {
	color: var(--color-black);
}
.lightbox .close {
	grid-area: close;
	justify-self: flex-end;
	display: flex;
}
.lightbox .prev,
.lightbox .next {
	align-self: center;
	display: flex;
}
.lightbox .prev {
	grid-area: prev;
	left: var(--lightbox-padding)
}
.lightbox .next {
	grid-area: next;
	justify-self: end;
	right: var(--lightbox-padding)
}
.lightbox .counter {
	grid-area: counter;
	align-self: end;
	margin: 0;
}

@media (max-width: 767px) {
	.lightbox {
		gap: var(--space-sm);
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 
			".          close"
			"figure    figure"
			"counter download";
	}
	.lightbox figure {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - var(--lightbox-padding) * 2 - 24px * 2 - var(--space-sm) * 2);
		max-height: calc(100dvh - var(--lightbox-padding) * 2 - 24px * 2 - var(--space-sm) * 2);
	}
	.lightbox figure img {
		flex: 1 1 0;
		height: 100%;
		max-height: unset;
		max-width: calc(100vw - var(--space-sm-lg) * 2);
	}
	.lightbox figcaption {
		max-width: unset;
		text-align: left;
		font-size: var(--text-xs);
	}
	.lightbox .counter {
		font-size: var(--text-xs);	
	}
	.lightbox .download > span {
		opacity: 0;
	}
	.lightbox .prev,
	.lightbox .next {
		grid-area: figure;
		display: grid;
		place-items: center;
		height: 94%;
		width: 50%;
		border-radius: 0;
		display: none;
	}
}