/*
Responsive Galerie
*/


:root{

--primary:#1565c0;

--secondary:#0d47a1;

--background:#f5f5f5;

--card:#ffffff;

--text:#333;

}



*{

box-sizing:border-box;

}



body{

margin:0;

font-family:
Arial,
Helvetica,
sans-serif;

background:
var(--background);

color:
var(--text);

}




.header{


height:100px;

background-size:cover;

background-position:center;

}



.overlay{


height:100%;

background:
rgba(0,0,0,.45);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:white;

text-align:center;

}



.logo{

max-height:80px;

}




.gallery{


padding:25px;

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(220px,1fr));

gap:20px;

}




.card{


background:white;

border-radius:10px;

overflow:hidden;

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

}



.card img{


width:100%;

height:220px;

object-fit:cover;

cursor:pointer;

}




.caption{


padding:10px;

font-size:14px;

}



button{


margin:10px;

padding:10px 15px;

border:0;

border-radius:5px;

background:
var(--primary);

color:white;

cursor:pointer;

}



button:hover{

background:
var(--secondary);

}




.lightbox{


display:none;

position:fixed;

z-index:999;

top:0;

left:0;

width:100%;

height:100%;

background:
rgba(0,0,0,.9);

align-items:center;

justify-content:center;

}



.lightbox img{


max-width:95%;

max-height:95%;

}



.close{


position:absolute;

right:30px;

top:20px;

font-size:50px;

color:white;

cursor:pointer;

}



footer{


background:#222;

color:white;

padding:20px;

text-align:center;

}



footer a{

color:white;

}




@media(max-width:600px){


.header{

height:220px;

}


.gallery{

padding:10px;

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

}


.card img{

height:150px;

}


}

.whatsapp {

background:#25D366;

}


.whatsapp:hover {

background:#128C7E;

}