.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto; 
  grid-gap: 20px;
 width: 100%;
  margin-top: 10em;
grid-template-areas: "item1 item2 item3 item6 item7"
					 "item4 item5 item8 item6 item7"
}					


img{
	width: 100%; 
  	height: 100%;
}


.item1 {
position: relative;
  text-align: center;
  color: white;
	grid-area: item1;
}

.item2 {
position: relative;
  text-align: center;
  color: white;
	grid-area: item2;
}
.item3 {
position: relative;
  text-align: center;
  color: white;

	grid-area: item3;
}
.item4 {
position: relative;
  text-align: center;
  color: white;

	grid-area: item4;
}
.item5 {
position: relative;
  text-align: center;
  color: white;

	grid-area: item5;
}
.item8 {
position: relative;
  text-align: center;
  color: white;

	grid-area: item8;
}

.item6 {
	grid-area: item6;
}
.item7 {
	grid-area: item7;
}
 
.centered {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

@media only screen and (max-width:800px){
.grid-container {
grid-template-columns: auto;
grid-template-rows: auto ;
grid-template-areas: "item1"
	"item2"
	"item3"
	"item4"
	"item5"
	"item8"
	"item6"
	"item7"

}	
	}
@media only screen and (max-width: 1500px) and (min-width: 801px){
	
.grid-container {
grid-template-columns: auto auto;
grid-template-rows: auto auto ;
grid-template-areas:"item1 item2"
					"item3 item4"
					"item5 item8"
					"item6 item7"

}	
}