*{
    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 20px;text-align:center;background:white;border-bottom:1px solid #ddd}
header h1{font-size:2rem;letter-spacing:2px}

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:1100px;margin:auto;padding:40px 20px}

.intro p{
    text-align:left;
    margin-bottom:40px;
    max-width:1100px;
}
.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;
}

.title-text{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.2rem;
	font-weight:normal;
	color:#333;	
	letter-spacing: 0.1em;
	text-align:center;
}

.title-text2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1rem;
	font-weight:normal;
	color:#999;	
	letter-spacing: 0.1em;
	text-align:center;
	margin:0;
}

.title-text3{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.9rem;
	font-weight:normal;
	color:#999;	
	letter-spacing:0.05em;
	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){
.tiles{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){
.tiles{grid-template-columns:1fr}
header h1{font-size:1.5rem}
}


/* CSS Document */