styles.css

body {
    background-color: black;
}
.header {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    padding: 10px;
}
.text{
    color: white;
    font-family: Rockwell Extra Bold,Rockwell Bold,monospace; 
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
}
.container {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%, 20%);
    width: 80%;
    margin: 10px auto;
    overflow: hidden;
    align-items: center;
}
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;
}
 
.galleryItem h3 {
    text-transform: uppercase;
}
 
.galleryItem img {
    max-width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;    
     
    width: 16%;
    margin:  2% 2% 50px 2%; 
}

/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .galleryItem {width: 21%;}
}
 
@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .galleryItem {width: 29.33333%;}
}
 
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .galleryItem {width: 46%;}
}
 
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .galleryItem {width: 96%;}
    .galleryItem img {width: 96%;}
    .galleryItem h3 {font-size: 18px;}
    .galleryItem p, {font-size: 18px;}
}