Bildergalerie unter Navigation

*{
margin:0;
padding:0;
font-family: Verdana;
}

.wrapper{
display:flex;
flex-flow:column wrap;
text-align:center;
}

.wrapper > *{
flex:1 100%;
}

.header{
background-color: #27A9E1;
color:white;
height:200px;
text-align: center;
font-size: 72px;
line-height: 200px;
}
.navigation{
list-style: none;
margin:0;
padding:0;
background-color: #BF362E;
border-top:2px solid white;
display:flex;
flex-flow:row wrap;
}
.navigation > a{
text-decoration: none;
display:block;
color:#F7EE6F;
text-align:center;
padding:15px;
background-color: #BF362E;
}
.navigation a:hover{
background-color:#F7EE6F;
color:#BF362E;
}


}
.row{
background-color: #F7EE6F;
display:flex;
flex-wrap:wrap;
padding:0;
}
.col{
padding:0px;
flex:100;
}

.col img{
max-width: 100%;
height:auto;
margin-top:0px;
}
footer{
background-color: #BF362E;
height:200px;
color:#F7EE6F;
text-align: center;
font-size: 40px;
line-height: 200px;
}

@media screen and (min-width:565px)
{
.navigation{
flex-flow:row wrap;
justify-content:space-around;
}
}

@media screen and (min-width:850px)
{
.navigation{
justify-content:flex-end;
}
}

@media (min-width:40em){
.col{
flex:50%;
max-width:50%;
}

@media (min-width:68.75em){
.col{
flex:25%;
max-width:25%;
}
}