.box {
	background-color: #EBEFFF;
	color: #363636;
	border-radius: 10px;
	padding: .5em;
	font-size: 1em;
}

.header,
.footer {
	background-color: #EBEFFF;
}

.sidebar1 {
	background-color: #F0F0FF;
	color: #444;
}

.sidebar2 {
	background-color: #F0F0FF;
	color: #444;
}

.wrapper, .wrapper1 {
	background-color: #85B6FF;
	color: #444;
	border-radius: 10px;
}

.content, .content2 {
	background-color: #F0F0FF;
	color: #444;
	border-radius: 10px;
}

/* ************* GRID ************** */

.sidebar1 {
	grid-area: sidebar1;
}

.sidebar2 {
	grid-area: sidebar2;
}

.content {
	grid-area: content;
}

.content2 {
	grid-area: content2;
}

.header {
	grid-area: header;
}

.footer {
	grid-area: footer;
}

/* ************* TWO SIDEBARS ************** */
.wrapper {
	display: grid;
	grid-gap: .2em;
	grid-template-areas: 
	"header"
	"sidebar1"
	"sidebar2"
	"content"
	"content2"
	"footer"
}
/* ************* ONE SIDEBAR ************** */
.wrapper1 {
	display: grid;
	grid-gap: .2em;
	grid-template-areas: 
	"header"
	"sidebar1"
	"content"
	"content2"
	"footer"
}

.span-col-2 {
	grid-column: span 2 / auto;
	background-color: #EBEFFF;
}

.span-col-3 {
	grid-column: span 3 / auto;
	background-color: #EBEFFF;
}

.span-row-2 {
	grid-row: span 2 / auto;
	background-color: #EBEFFF;
}

.span-row-3 {
	grid-row: span 3 / auto;
	background-color: #EBEFFF ;
}

/* *******  TABLET DISPLAYS ******** */
/* ************* TWO SIDEBARS ************** */
@media only screen and (min-width: 760px)  {
.wrapper {
	grid-template-columns: 30% 1fr;
	grid-template-areas: 
	"header header"
	"sidebar1 content"
	"sidebar2 content2"
	"footer footer";
}
/* ************* ONE SIDEBAR ************** */
.wrapper1 {
	grid-template-columns: 30% 1fr;
	grid-template-areas: 
	"header header"
	"sidebar1 content"
	"sidebar2 content2"
	"footer footer";
}
}

/* *******  LAPTOP AND LARGER DISPLAYS ******** */
/* ************* TWO SIDEBARS ************** */
@media only screen and (min-width: 1000px)   {
.wrapper {
	grid-template-columns: 25% 1fr 25%;
	grid-template-areas: 
	"header header header"
	"sidebar1 content sidebar2"
	"sidebar1 content2 sidebar2"
	"footer footer footer";
	max-width: 1200px;
}
/* ************* ONE SIDEBAR ************** */
.wrapper1 {
	grid-template-columns: 30% 1fr;
	grid-template-areas: 
	"header header"
	"sidebar1 content"
	"footer footer";
	max-width: 1200px;
}
}