* {
    box-sizing: border-box;
  }

#container {
    display: grid;
    grid-template-columns: 3fr 3fr 3fr 3fr;
    grid-template-rows: auto;
    grid-template-areas: 
     "header-text picture picture picture"
     "header-text picture picture picture"
     "header-text picture picture picture"
     "header-text picture picture picture"
     "header-text picture picture picture"
     "header-text picture picture picture"
     ;
     grid-gap: 5px;
}

#container section:nth-of-type(1) {
    grid-area: header-text;
    line-height: 1.8em;
    font-size: 1.2em;
}

#container section::content {
    grid-area: picture;
}


@media only screen and (max-width: 1200px) {

    #container {
        display: grid;
        grid-template-columns: 4fr 4fr 4fr;
        grid-template-rows: auto;
        grid-template-areas: 
         "header-text picture picture"
         "header-text picture picture"
         "header-text picture picture"
         "header-text picture picture"
         "header-text picture picture"
         "header-text picture picture"
         "header-text picture picture"
         "header-text picture picture"
         "header-text picture picture"
         ;
    }

}

@media only screen and (max-width: 768px) {

    #container {
        display: grid;
        grid-template-columns: 12fr;
        grid-template-rows: auto;
        grid-template-areas: 
         "header-text"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         "picture"
         ;
    }
}