*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Cormorant Garamond', serif;
background:black;
color:white;
}


/* HERO PAGE */

.hero{
height:100vh;
background-image:url("images/villa.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.overlay{
background:rgba(0,0,0,0.35);
width:100%;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.logo{
width:420px;
margin-bottom:20px;
}


/* SUBTITLE */

.subtitle{
font-size:22px;
letter-spacing:3px;
margin-bottom:40px;
text-decoration:none;
color:white;
}

.subtitle:hover{
opacity:0.7;
}


/* CONTACT */

.contact{
text-decoration:none;
color:white;
border-bottom:1px solid white;
font-size:18px;
}

.contact:hover{
opacity:0.6;
}



/* GALLERY PAGE */

.gallery-page{
background:white;
color:black;
}

.gallery-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:40px;
}

.logo-small{
width:200px;
}

.gallery{
columns:3;
gap:20px;
padding:40px;
}

.gallery img{
width:100%;
margin-bottom:20px;
break-inside:avoid;
cursor:pointer;
transition:0.3s;
}

.gallery img:hover{
opacity:0.85;
}


/* MOBILE */

@media(max-width:900px){

.gallery{
columns:2;
}

.logo{
width:280px;
}

}

@media(max-width:600px){

.gallery{
columns:1;
}

}