/* Masonry gallery */

.gallery{
column-count: 3;
column-gap: 25px;
}

@media (max-width: 1000px){
.gallery{
column-count: 2;
}
}

@media (max-width: 600px){
.gallery{
column-count: 1;
}
}

.gallery-item{
break-inside: avoid;
margin-bottom: 25px;
background:#f3f7f3;
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 14px rgba(0,0,0,0.15);
transition:transform .25s;
cursor:pointer;
}

.gallery-item:hover{
transform:translateY(-6px);
}

.gallery-item img{
width:100%;
height:auto;
display:block;
}

/* image info */

.image-info{
padding:14px 16px;
}

.image-info h3{
margin-bottom:6px;
color:#3d5144;
font-size:1.05rem;
}

.image-info p{
font-size:.9rem;
color:#5f6f65;
line-height:1.4;
}
/* overlay container */

.gallery-item{
position:relative;
overflow:hidden;
}

.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
to top,
rgba(34,46,38,0.85),
rgba(34,46,38,0.35),
rgba(34,46,38,0)
);

display:flex;
align-items:flex-end;

opacity:0;
transition:opacity .35s ease;
}

/* text inside overlay */

.overlay-text{
color:#e6efe8;
padding:18px;
}

.overlay-text h3{
margin-bottom:6px;
font-size:1.1rem;
}

.overlay-text p{
font-size:.9rem;
line-height:1.35;
}

/* hover effect */

.gallery-item:hover .overlay{
opacity:1;
}
.gallery-item img{
transition:transform .4s ease;
}

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