*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    letter-spacing:0.05em;
}

body{background:#fafafa;color:#222}

header{padding:30px;text-align:center;background:white;border-bottom:1px solid #ddd}
nav{margin-top:15px}
nav a{margin:0 12px;text-decoration:none;color:#333;font-size:0.95rem;}
nav a:hover{opacity:0.6}
.container{max-width:1200px;margin:auto;padding:40px 20px}

.wrap{
  display: flex;
  justify-content: space-between; /* Duwt de elementen uit elkaar */
  align-items: center; /* Zorgt ervoor dat ze verticaal exact op dezelfde hoogte staan */
  width: 100%;
  margin-bottom:40px;
}






.intro{text-align:left;margin-bottom:40px}
.intro h2{font-size:1.8rem;margin-bottom:10px}

.tiles{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}



.tile{
position:relative;
overflow:hidden;
border:1px solid #eee;
background:white;
transition:transform .25s ease, box-shadow .25s ease;
}

.tile:hover{
transform:scale(1.02);
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.tile img{
width:100%;
height:260px;
object-fit:cover;
display:block;
}

.tile-title{
position:absolute;
bottom:0;
left:0;
width:100%;
background:rgba(255,255,255,0.0);
color:white;
padding:12px;
font-size:0.95rem;
letter-spacing:.5px;
}

.tile a{display:block;color:inherit;text-decoration:none}





footer{
text-align:center;
padding:40px 20px;
font-size:0.85rem;
color:#666;
}

.gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

.gallery img{
width:100%;
display:block;
cursor:pointer;
border:1px solid #eee;
}

/* lightbox */
.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(255,255,255,0.9);
backdrop-filter: blur(40px);
display:none;
align-items:center;
justify-content:center;
z-index:1000;
}

.lightbox.active{display:flex}

.lightbox img{
max-width:90%;
max-height:90%;
}

.lightbox-close{
position:absolute;
top:30px;
right:40px;
font-size:32px;
color:#222;
cursor:pointer;
}


.title-text{
	
	font-size:1.2rem;
	font-weight:normal;
	color:#999;	
	letter-spacing: 0.1em;
	text-align:center;
}
.title-text2{
	
	font-size:0.8rem;
	font-weight:normal;
	color:#999;	
	letter-spacing:0.1em;
	text-align:center;
}

.title-text3{
	
	font-size:0.9rem;
	font-weight:normal;
	color:#999;	
	letter-spacing:0.1em;
	text-align:left;
}



.gallery-navigation {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.gallery-navigation a {
    text-decoration: none;
    color: #666;
}

.gallery-navigation a:hover {
    color: #000;
}

@media(max-width:900px){
.gallery{grid-template-columns:repeat(2,1fr)}
.rechts{display:none}
}

@media(max-width:600px){
.gallery{grid-template-columns:1fr}
.rechts{display:none}
}