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

body{
font-family:Arial, sans-serif;
display:flex;
flex-direction:column;
min-height:100vh;
background:#111;
color:white;
}

header{
text-align:center;
padding:30px;
background:#222;
}

footer{
text-align:center;
padding:20px;
background:#222;
margin-top:auto;
}

main{
flex:1;
display:flex;
justify-content:center;
align-items:center;
padding:30px;
}

.gallery{
display:flex;
flex-wrap:wrap;
gap:15px;
max-width:900px;
justify-content:center;
}

.box{
width:250px;
height:180px;
background-size:cover;
background-position:center;
border-radius:10px;
transition:transform 0.3s;
}

.box:hover{
transform:scale(1.08);
}

/* slike */

.box:nth-child(1){background-image:url(images/slika1.jpg);}
.box:nth-child(2){background-image:url(images/slika2.jpg);}
.box:nth-child(3){background-image:url(images/slika3.jpg);}
.box:nth-child(4){background-image:url(images/slika4.jpg);}
.box:nth-child(5){background-image:url(images/slika5.jpg);}
.box:nth-child(6){background-image:url(images/slika6.jpg);}
.box:nth-child(7){background-image:url(images/slika7.jpg);}
.box:nth-child(8){background-image:url(images/slika8.jpg);}
.box:nth-child(9){background-image:url(images/slika9.jpg);}

/* swap */

.box:nth-child(1):hover{background-image:url(images/slika1b.jpg);}
.box:nth-child(2):hover{background-image:url(images/slika2b.jpg);}
.box:nth-child(3):hover{background-image:url(images/slika3b.jpg);}
.box:nth-child(4):hover{background-image:url(images/slika4b.jpg);}
.box:nth-child(5):hover{background-image:url(images/slika5b.jpg);}
.box:nth-child(6):hover{background-image:url(images/slika6b.jpg);}
.box:nth-child(7):hover{background-image:url(images/slika7b.jpg);}
.box:nth-child(8):hover{background-image:url(images/slika8b.jpg);}
.box:nth-child(9):hover{background-image:url(images/slika9b.jpg);}

/* responsive */

@media (max-width:600px){

.box{
width:100%;
}

}

@media (min-width:601px) and (max-width:900px){

.box{
width:45%;
}

}

@media (min-width:901px){

.box{
width:30%;
}

}