body {
  padding-top: 20px;
  background: #d8e8f5; /*#f5f7f8;*/
}

.grid-1 {
  display: grid;
  width: 100%;
  margin: auto auto;
  
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-gap: 5px;
  
  grid-template-areas: "header"
                       "main";
}

/* items */

.grid-1 div {
  color: white;
  font-size: 32px;
  padding: 10px;
  }

/* rwd */

@media only screen and (min-width: 600px) {

	.grid-1 {
    max-width: 1200px;
	  grid-template-columns: repeat(1, 1fr);
	  grid-template-rows: auto auto auto;
	  grid-gap: 5px;
	  
	  grid-template-areas: "header"
	                       "main";
	}

	.grid-1 div {
	  font-size: 20px;
	  padding: 5px;
	 }

}

/* specific item styles */

.item-1 {
  background: #d8e8f5
  grid-area: header;
}
.item-2 {
  background: #d8e8f5
  grid-area: main;
  
  display: grid;
  
  grid-template-columns: 100%;
  word-wrap: break-word;
  grid-template-rows: auto;
  grid-gap: 20px;
  
  grid-template-areas: "article"
                       "article"
                       "article";
  
}

/* rwd */

@media only screen and (min-width: 600px) {

	.item-2 {
	  
	  grid-template-columns: 1fr 33%;
	  grid-template-rows: auto auto auto;
	  grid-gap: 10px;
	  
	  grid-template-areas: "article article article";
	  
	}

}

.item-6 {
  background: #d8e8f5 /*#3d8bb1;*/
  grid-area: article;
}

.item-6 img{
  width: auto ;
  max-width: 100% ;
  height: auto ;
}

@media only screen and (min-width: 600px) {

    .item-6 img{
    width: 380px;
    max-width: 100% ;
    height: 340px ;
  }

}