.gallery{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
}

.gallery-item{
	position:relative;
	display:block;
	width:100%;
	min-height:0;
	padding:0;
	overflow:hidden;
	border:1px solid var(--line);
	border-radius:var(--radius);
	background:#fff;
	box-shadow:0 10px 24px rgba(16,24,32,.07);
	cursor:pointer;
}

.gallery-item::after{
	content:"Megnyitás";
	position:absolute;
	left:12px;
	bottom:12px;
	padding:7px 10px;
	border-radius:7px;
	background:rgba(16,24,32,.84);
	color:#fff;
	font-size:13px;
	font-weight:800;
	opacity:0;
	transform:translateY(4px);
	transition:opacity .18s ease,transform .18s ease;
}

.gallery-item img{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	transition:transform .22s ease,filter .22s ease;
}

.gallery-item:hover img{
	transform:scale(1.04);
	filter:saturate(1.06);
}

.gallery-item:hover::after{
	opacity:1;
	transform:translateY(0);
}

.img-modal{
	position:fixed;
	inset:0;
	z-index:100;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	padding:28px;
	background:rgba(8,12,16,.94);
	opacity:0;
	pointer-events:none;
	transition:opacity .2s ease;
}

.img-modal.active{
	opacity:1;
	pointer-events:auto;
}

.img-modal img{
	max-width:min(1120px, 92vw);
	max-height:78vh;
	border-radius:8px;
	box-shadow:0 28px 80px rgba(0,0,0,.42);
	transition:transform .16s ease;
}

.modal-close,
.modal-arrow{
	position:absolute;
	width:46px;
	height:46px;
	min-height:46px;
	padding:0;
	border:1px solid rgba(255,255,255,.18);
	border-radius:8px;
	background:rgba(255,255,255,.08);
	color:#fff;
	box-shadow:none;
}

.modal-close{
	top:20px;
	right:24px;
	font-size:32px;
	line-height:1;
}

.modal-arrow{
	top:50%;
	font-size:28px;
	transform:translateY(-50%);
}

.modal-prev{
	left:24px;
}

.modal-next{
	right:24px;
}

.caption{
	margin-top:16px;
	color:#dce7ef;
	font-size:15px;
	text-align:center;
}

@media (max-width:980px){
	.gallery{
		grid-template-columns:repeat(3,1fr);
	}
}

@media (max-width:680px){
	.gallery{
		grid-template-columns:repeat(2,1fr);
		gap:10px;
	}

	.img-modal{
		padding:18px;
	}

	.modal-close,
	.modal-arrow{
		width:40px;
		height:40px;
		min-height:40px;
	}

	.modal-prev{
		left:10px;
	}

	.modal-next{
		right:10px;
	}
}