@media (max-width: 955px){

body{
margin: 0 10px 10px 10px;
}

.logo1{
display: none;
}

header{
width: 100%;
margin: 10px auto;
}

nav{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
width: 422px;
max-width: 100%;
box-sizing: border-box;
}

nav > div{
display: block;
flex-grow: 1;
}

nav > div > *, nav > div > *:hover{
background-color: #bbdffd;
border: 1px solid #06d;
color: #000 !important;
border-radius: 0px;
padding: 2px;
font-size: 18px;
}

nav > div > *:first-of-type{
margin-bottom: 10px;
}

.logo2{
min-width: 100%;
}

a.image-container{
margin-bottom: 0;
}

.h3-gallery-title{
margin-top: 0;
}

#gallery:not(:last-of-type){
margin-bottom: 10px;
}

}

@media (max-width: 555px){

header, header *{
max-width: 100%;
}

.logo1, .logo2{
display: none;
}

.logo3{
display: block !important;
margin-bottom: 20px;
}

nav{
margin: -10px auto 0 auto;
}

.link-to-gallery, .link-to-gallery span{
font-size: 14px;
}

#gallery{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 2fr));
grid-auto-rows: 240px;
grid-gap: 10px;
}

.social-media-buttons a:not(last-of-type) img:hover{
transform: none;
}

.social-media-buttons a:last-of-type img:hover{
transform: rotate(90deg);
}

}

@media (max-width: 455px){

.link-to-gallery, .link-to-gallery a{
width: 100%;
display: block;
margin: 10px 0;
}

}