/*uncomment for different Grids*/
/************************
SIMPLE GRID
**************************/
/*.container{
  display: grid;
  grid-template-columns: 250px 250px 250px 250px 250px;
  grid-template-rows: 150px;
}*/



/************************
SAME AS
**************************/

/* .container{
  display: grid;
  grid-template-columns: repeat(5, 250px);
  grid-template-rows: 150px;
}
 */

/************************
WITH GUTTER
**************************/

/* .container{
  display: grid;
  grid-template-columns: repeat(5, 250px);
  grid-gap: 30px;
} */


/********************************
AUTOMATED DISTRIBUTION WITH FR
*********************************/

/* .container{
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
}
 */

/********************************
AUTOMATED DISTRIBUTION WITH FIXED COL
*********************************/

/* .container{
  display: grid;
  grid-template-columns: 300px 3fr 2fr;
}
 */


/****************************
MOVING ITEMS HORIZONTALLY
****************************/

/*   .container{
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
  }
  .item-1 {
   grid-column: 1 / 4;
  }
  .item-5 {
   grid-column: 3 / 4;
  }
 */


/***************************
MOVING ITEMS VERTICALLY
**************************/

/* .container{
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
}
.item-2 {
 grid-row: 1 / 3;
}
.item-1 {
 grid-column: 1 / 4;
 grid-row: 3 / 4;
}
 */

/************************
ADJUST FOR OTHER DEVICES
**************************/

/* .container{
 display: grid;
 grid-template-columns: 250px 3fr 2fr;
}
.item-1 {
 grid-column: 1 / 4;
}
.item-2 {
 grid-row: 2 / 4;
}
@media only screen and (max-width: 720px){
  .container{
   grid-template-columns: 1fr 1fr;
  }
  .item-1 {
   grid-column: 1 / 3;
   grid-row: 2 / 3;
  }
  .item-2 {
   grid-row: 1 / 1;
  }
}
 */

 /********************************
ADVANCED SKETCH EXAMPLE 2
*********************************/

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
	color: white;
	font: 1.3rem Inconsolata, monospace;
	font-size: 15px;
	text-align: center;
	line-height: 1.5;
}

h1 {
  font-size: 21px;
  font-weight: normal;
}

a {
  color: black;
  text-decoration: underline;
}
.circular--square {
  border-radius: 50%;
}

.container{
  display: grid;
  grid-template-columns: 1fr 350px 350px;
  grid-template-rows: 100px;
  height: 100vh;
  width: 100vw;
}


.item-1 {
  grid-column: 1/4;
}

.item-2 {
  grid-row: 2 / 4;
}

.item-3 {
  grid-column: 2/4
}

.item-4 {
  grid-column: 2/3;
}

.footer{
  grid-column: 1/5;
  color: white;
}


@media only screen and (max-width: 1000px){
  .container {
  grid-template-columns: 1fr 1fr;
}
  .item-2 {
    grid-column: 1/3;
    grid-row: 4/5;
  }

  .item-3 {
    grid-column: 1/3;
  }
  /* .item-4 {
    grid-column: 1/2;
  }
   .item-5 {
    grid-column: 2/3;
  } */
}




/************************
BASE STYLING
**************************/
.item-1 {
	background-color: #2C3043;

  margin-bottom: 20px;
}
.item-2 {
  padding-left: 50%;
}
.item-3 {
  padding-top: 50px;
  text-align: left;
  color: black;
}
/* .item-4 {
	border: 1px solid black;
}
.item-5 {
	border: 1px solid black;
} */