.gallery-modal{
	display:none;
	position:fixed;
	inset:0;
	z-index:99999;
}

.gallery-modal.open{
	display:block;
}

.gallery-modal-overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.78);
}

.gallery-modal-center{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	max-width:65vw;
	max-height:86vh;
	text-align:center;
	z-index:2;
}

.gallery-modal-image{
	display:block;
	max-width:100%;
	max-height:78vh;
	width:auto;
	height:auto;
	margin:0 auto;
	border:1px solid rgba(255,255,255,.6);
	border-radius:10px;
}

.gallery-modal-caption{
	color:#fff;
	margin-top:10px;
	font-size:15px;
}

.gallery-modal-close,
.gallery-modal-prev,
.gallery-modal-next{
	position:absolute;
	z-index:3;
	background:rgba(0,0,0,.45);
	color:#fff;
	border:1px solid rgba(255,255,255,.7);
	border-radius:50%;
	cursor:pointer;
}

.gallery-modal-close{
	top:14px;
	left:50%;
	transform:translateX(-50%);
	width:36px;
	height:36px;
	font-size:24px;
}

.gallery-modal-prev,
.gallery-modal-next{
	top:50%;
	transform:translateY(-50%);
	width:42px;
	height:42px;
	font-size:28px;
}

.gallery-modal-prev{ left:12px; }
.gallery-modal-next{ right:92px; }

.gallery-modal-thumbs{
	position:absolute;
	top:0;
	right:0;
	width:78px;
	height:100%;
	padding:12px 8px;
	overflow-y:auto;
	z-index:2;
	background:rgba(0,0,0,.35);
}

.gallery-modal-thumbs button{
	display:block;
	width:100%;
	margin:0 0 8px;
	padding:0;
	border:1px solid transparent;
	background:none;
	cursor:pointer;
}

.gallery-modal-thumbs button.active{
	border-color:#fff;
}

.gallery-modal-thumbs img{
	display:block;
	width:100%;
	height:auto;
	border-radius:6px;
}

@media(max-width:700px){

	.gallery-modal-center{
		width:calc(100% - 64px);
		max-width:92vw;
		max-height:68vh;
	}

	.gallery-modal-image{
		max-height:58vh;
	}

	.gallery-modal-thumbs{
		top:auto;
		bottom:12px;
		left:0;
		right:0;
		width:100%;
		height:92px;
		padding:8px 12px;
		display:flex;
		gap:8px;
		overflow-x:auto;
		overflow-y:hidden;
		background:rgba(0,0,0,.55);
	}

	.gallery-modal-thumbs button{
		flex:0 0 74px;
		width:74px;
		height:74px;
		margin:0;
	}

	.gallery-modal-thumbs img{
		width:100%;
		height:100%;
		object-fit:cover;
	}

	.gallery-modal-next{
		right:12px;
	}

}