/* HERO */

.gallery-hero{


height:450px;

background:
linear-gradient(
rgba(0,0,0,.4),
rgba(0,0,0,.6)
),
url('/site/images/gallery-bg.jpg');


background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;


text-align:center;

color:white;


}



.gallery-hero-content span{


letter-spacing:4px;

font-size:14px;

color:#E8D6AA;


}



.gallery-hero-content h1{


font-size:55px;

margin:20px 0;

font-weight:700;


}





.gallery-hero-content p{


font-size:18px;

}






/* PAGE */


.gallery-page{


padding:80px 0;

background:#f8f5ef;


}





/* FILTRE */


.gallery-filter{


display:flex;

justify-content:center;

gap:15px;

margin-bottom:50px;

flex-wrap:wrap;


}




.filter-btn{


border:none;

background:white;

padding:12px 35px;

border-radius:50px;

color:#9F7B28;

cursor:pointer;


transition:.3s;


}



.filter-btn.active,
.filter-btn:hover{


background:#C7A247;

color:white;


}







/* GRID */


.gallery-grid{


display:grid;

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


gap:25px;


}





.gallery-card{


height:300px;

position:relative;

overflow:hidden;

border-radius:18px;


background:#111;


box-shadow:
0 15px 35px rgba(0,0,0,.15);


}



.gallery-card img{


width:100%;

height:100%;

object-fit:cover;

transition:.6s;


}



.gallery-card:hover img{


transform:scale(1.12);


}





.gallery-info{


position:absolute;

bottom:0;

left:0;

width:100%;

padding:25px;


background:
linear-gradient(
transparent,
rgba(0,0,0,.85)
);


color:white;


}



.gallery-info h4{


font-size:18px;

margin:0;


}



.gallery-info span{


color:#E8D6AA;

font-size:14px;


}







/* VIDEO */


.play{


position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);


width:70px;

height:70px;


border-radius:50%;


background:#C7A247;


color:white;


display:flex;

align-items:center;

justify-content:center;


font-size:25px;


}







@media(max-width:1200px){


.gallery-grid{

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

}


}



@media(max-width:768px){


.gallery-grid{

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

}


.gallery-hero h1{

font-size:40px;

}


}



@media(max-width:480px){


.gallery-grid{

grid-template-columns:
1fr;

}


}