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

body{font-family: 'Montserrat', sans-serif; overflow:hidden;}

/* HEADER */
header{
  position:absolute;
  top:0; left:0; width:100%;
  padding:10px 40px;
  z-index:1000;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,0.15);
  border-bottom:1px solid rgba(255,255,255,0.2);
}

.logo{display:flex; justify-content:center;}
.logo a img{width:200px; height:auto;}

/* =================== DESKTOP =================== */
/* SEKCJA */

.container{
display:flex;
height:100vh;
width:100%;
}

.panel{
flex:1;
position:relative;
overflow:hidden;
transition:all .4s ease;
cursor:pointer;
}

.panel img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease, filter .4s ease;
}

/* POWIĘKSZENIE AKTYWNEGO */

.panel:hover{
flex:1.1;
z-index:2;
box-shadow:0 0 40px rgba(0,0,0,0.4);
}

.panel:hover img{
transform:scale(1.05);
}

/* ROZMYCIE POZOSTAŁYCH */

.container:hover .panel:not(:hover) img{
filter:blur(3px) brightness(.7);
}

/* TEKST */

.panel-title{
position:absolute;
bottom:40px;
left:40px;
color:white;
font-size:24px;
font-weight:bold;
text-shadow:0 3px 10px rgba(0,0,0,0.6);
}

/* =================== MOBILE =================== */
@media(max-width:900px){

body{
overflow:auto;
}
	
.logo a img{width:150px; height:auto;}

/* kontener */
.container{
display:block;
position:relative;
height:100vh;
}

/* ukryj wszystkie */
.panel{
height:100vh;
width:100%;
display:none;
transition:opacity .4s ease;
}

/* pokaż aktywny */
.panel.active{
display:block;
opacity:1;
}

/* wyłącz hover */
.panel:hover{
flex:1;
}

.controls{
position:absolute;
top:50%;
width:100%;
display:flex;
justify-content:space-between;
transform:translateY(-50%);
z-index:10;
}

.controls button{
background:rgba(0,0,0,0.4);
border:none;
color:white;
font-size:30px;
padding:15px 20px;
cursor:pointer;
}

}