/* =====================================
   BMTC PUBLIC GALLERY THUMBNAIL
===================================== */


.gallery-grid{

display:grid;

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

gap:15px;

width:100%;

}





.gallery-card{

background:#111;

border-radius:12px;

overflow:hidden;

cursor:pointer;

transition:.3s;

}




.gallery-card:hover{

transform:translateY(-5px);

}





.gallery-card img{


width:100%;

height:130px;

object-fit:cover;

display:block;

transition:.3s;


}




.gallery-card img:hover{


transform:scale(1.08);


}




.gallery-card h3{


margin:0;

padding:12px;

font-size:15px;

color:white;

text-align:center;


}





.gallery-card p{


display:none;


}





.gallery-card span{


display:none;


}







/* =====================================
   GALLERY LIGHTBOX
===================================== */



.gallery-modal{


display:none;

position:fixed;

z-index:9999;

left:0;

top:0;

width:100%;

height:100%;

background:
rgba(0,0,0,0.9);


align-items:center;

justify-content:center;

flex-direction:column;


}





.gallery-modal-image{


max-width:85%;

max-height:80%;

object-fit:contain;

border-radius:15px;


}





.gallery-modal h3{


color:white;

margin-top:20px;

font-size:24px;

text-align:center;


}





.close-gallery{


position:absolute;

top:25px;

right:45px;

font-size:45px;

font-weight:bold;

color:white;

cursor:pointer;


}





.close-gallery:hover{


color:#d4af37;


}






/* =====================================
   RESPONSIVE
===================================== */



@media(max-width:1200px){


.gallery-grid{

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

}


}





@media(max-width:900px){


.gallery-grid{

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

}


}





@media(max-width:600px){


.gallery-grid{

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

}


.gallery-card img{

height:120px;

}


}





@media(max-width:400px){


.gallery-grid{

grid-template-columns:
1fr;

}


}