/* 3X3 GRID - 3X3 GRID */

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: pic1; }
.item4 { grid-area: pic2; }
.item5 { grid-area: pic3; }
.item6 { grid-area: pic4; }
.item7 { grid-area: pic5; }
.item8 { grid-area: pic6; }
.item9 { grid-area: pic7; }
.item10 { grid-area: pic8; }
.item11 { grid-area: pic9; }
.item12 { grid-area: footer; }
.item13 { grid-area: blank; }

.grid-container-1 {
display: grid;
grid-template-areas:
	'menu pic1 pic2 pic3'
	'menu pic4 pic5 pic6'
	'menu pic7 pic8 pic9';
grid-template-columns:
	150px auto auto auto;
grid-gap: 20px;
background-color: #fff;
padding: 0px;
}

.grid-container-1 > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: left;
padding: 0px 0;
font-size: 0px;
}
.item2 {
border-right: 1px solid grey;
}


/* 3X2 GRID - 3X2 GRID */

.itemx1 { grid-area: header; }
.itemx2 { grid-area: menu; }
.itemx3 { grid-area: pic1; }
.itemx4 { grid-area: pic2; }
.itemx5 { grid-area: pic3; }
.itemx6 { grid-area: pic4; }
.itemx7 { grid-area: pic5; }
.itemx8 { grid-area: pic6; }
.itemx9 { grid-area: pic7; }
.itemx10 { grid-area: pic8; }
.itemx11 { grid-area: pic9; }
.itemx12 { grid-area: footer; }

.grid-container-x {
display: grid;
grid-template-areas:
	'menu pic1 pic2 pic3'
	'menu pic4 pic5 pic6';
grid-template-columns:
	150px auto auto auto;
grid-gap: 20px;
background-color: #fff;
padding: 0px;
}

.grid-container-x > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: left;
padding: 0px 0;
font-size: 0px;
}



/* ABOUT GRID - ABOUT GRID */

.item-menu { grid-area: menu; }
.item-about { grid-area: about-text; }

.grid-container-about {
  display: grid;
  grid-template-areas:
    'menu about-text';
grid-template-columns:
	150px auto;
grid-gap: 20px;
background-color: #fff;
padding: 0px;
}

.grid-container-about > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: left;
padding: 0px 0;
font-size: 0px;
}

.item-menu {
border-right: 1px solid grey;
}






/* 2X2 GRID - 2X2 GRID */

.itema { grid-area: menu-home; }
.itemb { grid-area: home1; }
.itemc { grid-area: home2; }
.itemd { grid-area: home3; }
.iteme { grid-area: home4; }

.grid-container-home {
  display: grid;
  grid-template-areas:
    'menu-home home1 home2'
    'menu-home home3 home4';
    grid-template-columns:
	150px auto auto;
  grid-gap: 20px;
  background-color: #fff;
  padding: 0px;
}

.grid-container-home > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding: 0px 0;
  font-size: 30px;
}

.itema {
border-right: 1px solid grey;
}



/* MENU STYLE - MENU STYLE */

ul {
font-size: 1.0rem;
list-style-type: none;
margin: 0;
padding: 0;
width: 130px;
background-color: rgba(255, 255, 255, 1);
text-decoration: none;
}

li a {
  display: block;
  color: #666;
  background-color: rgba(245, 245, 245, 0.5);
  padding: 5px 0px 5px 10px;
  margin: 0 0 5px 0;
  text-decoration: none;
}

li a.active {
  background-color: #ccc;
  color: white;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #aaa;
  color: white;
  text-decoration: none;
}