/*
==================================================
GALLERY
Mazury Hip Hop Festival Premium Theme
==================================================
*/


/*
--------------------------------
SECTION
--------------------------------
*/


.gallery-section {

	background:var(--color-light);

}



/*
--------------------------------
GRID
--------------------------------
*/


.gallery-grid {

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:20px;

}





/*
--------------------------------
ITEM
--------------------------------
*/


.gallery-item {

	position:relative;

	margin:0;

	overflow:hidden;

	border-radius:var(--radius-md);

	cursor:pointer;

	background:var(--color-dark);

	aspect-ratio:1 / 1;

}



.gallery-item img {

	width:100%;

	height:100%;

	object-fit:cover;

	transition:var(--transition-slow);

}



.gallery-item:hover img {

	transform:scale(1.08);

}





/*
--------------------------------
OVERLAY
--------------------------------
*/


.gallery-overlay {

	position:absolute;

	inset:0;

	display:flex;

	align-items:center;

	justify-content:center;

	background:rgba(0,0,0,.55);

	opacity:0;

	transition:var(--transition-base);

}



.gallery-item:hover .gallery-overlay {

	opacity:1;

}



.gallery-overlay i {

	display:flex;

	align-items:center;

	justify-content:center;

	width:60px;

	height:60px;

	border-radius:50%;

	background:var(--color-primary);

	color:white;

	font-size:22px;

}





/*
--------------------------------
FEATURED
--------------------------------
*/


.gallery-item.large {

	grid-column:span 2;

	grid-row:span 2;

}







/*
--------------------------------
LIGHTBOX
--------------------------------
*/


#gallery-lightbox {

	position:fixed;

	inset:0;

	z-index:var(--z-modal);

	display:flex;

	align-items:center;

	justify-content:center;

	padding:30px;

	background:rgba(0,0,0,.92);

	opacity:0;

	visibility:hidden;

	transition:var(--transition-base);

}



#gallery-lightbox.active {

	opacity:1;

	visibility:visible;

}



.gallery-lightbox-image {

	max-width:90vw;

	max-height:85vh;

	object-fit:contain;

	border-radius:var(--radius-md);

	box-shadow:var(--shadow-lg);

}





.gallery-close {

	position:absolute;

	top:30px;

	right:40px;

	width:50px;

	height:50px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:50%;

	background:white;

	color:var(--color-dark);

	font-size:25px;

	z-index:2;

}





.gallery-close:hover {

	transform:rotate(90deg);

}





/*
--------------------------------
FOOTER CTA
--------------------------------
*/


.gallery-footer {

	margin-top:50px;

	text-align:center;

}







/*
--------------------------------
TABLET
--------------------------------
*/


@media(max-width:991px){


.gallery-grid {

	grid-template-columns:repeat(3,1fr);

}



}






/*
--------------------------------
MOBILE
--------------------------------
*/


@media(max-width:600px){


.gallery-grid {

	grid-template-columns:repeat(2,1fr);

	gap:12px;

}



.gallery-item.large {

	grid-column:span 2;

	grid-row:auto;

}



.gallery-lightbox-image {

	max-width:95vw;

}



.gallery-close {

	right:20px;

	top:20px;

}



}