/* HERO */
.gallery-hero{
padding:140px 20px 80px;
text-align:center;
background:linear-gradient(135deg,#00AEEF,#ff6b6b);
color:white;
}

.gallery-hero h1{
font-size:clamp(24px,5vw,46px);
font-family:'Fredoka', sans-serif;
}

.gallery-hero p{
font-size:18px;
}

/* GALLERY GRID */
.gallery-section{
padding:80px 8%;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
background:#f7fbff;
}

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

.gallery-item img{
width:100%;
height:260px;
object-fit:cover;
transition:0.4s ease;
}

/* hover zoom */
.gallery-item:hover img{
transform:scale(1.12);
}

/* LIGHTBOX */
.lightbox{
position:fixed;
display:none;
justify-content:center;
align-items:center;
background:rgba(0,0,0,0.85);
top:0;
left:0;
width:100%;
height:100%;
z-index:9999;
}

.lightbox-img{
max-width:90%;
max-height:85%;
border-radius:10px;
}

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


/* email link style */
.email-link{
color:#fff;
text-decoration:none;
font-weight:500;
}

.email-link:hover{
text-decoration:underline;
color:#ffbe0b;
}

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

/* Large Screens */
@media (min-width:1400px){
  .gallery-section{
    grid-template-columns:repeat(4,1fr);
  }
}

/* Laptops */
@media (max-width:1200px){
  .gallery-section{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Tablets */
@media (max-width:992px){

  .gallery-hero{
    padding:120px 20px 70px;
  }

  .gallery-hero h1{
    font-size:34px;
  }

  .gallery-hero p{
    font-size:16px;
  }

  .gallery-section{
    grid-template-columns:repeat(2,1fr);
    padding:70px 6%;
  }

}

/* Large Phones */
@media (max-width:768px){

  .gallery-hero{
    padding:110px 20px 60px;
  }

  .gallery-hero h1{
    font-size:28px;
  }

  .gallery-section{
    grid-template-columns:1fr;
  }

  .gallery-item img{
    height:220px;
  }

}

/* Small Phones */
@media (max-width:480px){

  .gallery-hero h1{
    font-size:24px;
  }

  .gallery-item img{
    height:200px;
  }

}
@media (hover:none){
  .gallery-item:active img{
    transform:scale(1.05);
  }
}