.gallery-section{
padding:60px 20px;
max-width:1200px;
margin:auto;
}

.gallery-title{
text-align:center;
margin-bottom:40px;
font-size:2rem;
}

.masonry-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
grid-auto-rows:10px;
gap:15px;
}

/* items */

.gallery-item{
position:relative;
overflow:hidden;
border-radius:10px;
cursor:pointer;
}

.gallery-item img,
.gallery-item video{
width:100%;
display:block;
border-radius:10px;
height: auto;
}

.gallery-item video{
  max-height: 400px;
  
  width: 100%;
  
  object-fit: cover;
  display: block;

}

/* hover effect */

.gallery-item img{
transition:transform .4s ease;
}

.gallery-item:hover img{
transform:scale(1.08);
}

.gallery-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}

.gallery-modal.active{
display:flex;
}

.modal-content{
max-width:90%;
max-height:90%;
text-align:center;
}

.modal-content img,
.modal-content video{
max-width:100%;
max-height:80vh;
border-radius: 5px;
}

#modalTitle{
color:white;
margin-top:15px;
}

.close-modal{
position:absolute;
top:30px;
right:40px;
color:white;
font-size:35px;
cursor:pointer;
}

@media (max-width: 600px){
  .masonry-grid{
    display: flex;
    flex-direction: column;
    
  }

  .gallery-item{
    position:none;
  }
}