:root{
    --main-radius: 5px;
  --main-padding: 5px;
}

body {
background-image: url("https://assets.codepen.io/13917157/POSS_BG_DARK.png");
		background-repeat: repeat; 
    padding-left: 20px;
  
}

.container {
	display:grid;
	height: 100vh;
	width: 1220px;
horizontally */
  align-items: center; /* centers items vertically */
	grid-template-columns: 360px 370px 360px ;
	grid-template-rows: 200px 100px 700px 263px;
  grid-gap: 0.3cm;
   font-family: "Gill Sans", sans-serif;
  font-weight: 520;
  font-size:14px;

  color: @004d40;
  text-align:center;
  grid-template-areas:
    "header header header"
    "menu menu menu"
    "content1 content2 content3"
    "footer footer footer"
}

h1 {
      font-size:24px;
 font-variant-caps: small-caps;
    font-weight: 700;
}
h2 {
      font-size:20px;
 font-variant-caps: small-caps;
   font-weight: 500;
}

header{ 
    background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/TSWlogo2.png");
background-repeat: no-repeat;
 border: 4px solid #c1c2c7;
      grid-area: header;
  border-radius:var(--main-radius);
   padding-top: 0.5cm;
}
#menu{   background: #F3F4F9;
  background-image: url("https://assets.codepen.io/13917157/StoneWash_7-225.png");
 border: 5px solid #919297;
      grid-area: menu;
  	    padding-top: 0.2cm;
  border-radius:var(--main-radius);

}


#content1{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content1;
   border-radius:var(--main-radius);
   padding-top: var(--main-padding);
   padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}  
         
#content2{ 
  background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
  grid-area: content2;
  border-radius:var(--main-radius);
   padding-top: var(--main-padding);
   padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
  #content3{ background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/PossibleLGHTBack2.png");
 border: 4px solid #c1c2c7;
     grid-area: content3;
      border-radius:var(--main-radius);
   padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

footer{background: #F3F4F9;
background-image: url("https://assets.codepen.io/13917157/FOOTER2b.png");
background-repeat: no-repeat;
 border: 4px solid #c1c2c7;
      grid-area: footer;
  border-radius:var(--main-radius);
   padding-top: 0.5cm;
}
   

@media only screen and (max-width:1000px){
  .container{
    grid-template-columns: 370px;
  
grid-template-rows: 200px 275px 700px 700px 700px 263px;
      grid-gap: 0.2cm;
    grid-template-areas:
      "header"
      "menu"
      "content1"
      "content2"
      "content3"
      "footer";
  }