/* some standard styling, non grid related */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
    padding: 0 1em;
}

.mainheader {
  border-bottom: 2px solid #2763ff;
	margin: 4em 0 2em 0;
}

.mainheader h1 span {
	display: block;
	font-size: 3rem;
	color: #666;
}



.mainfooter {
	background-color: #666;
	color: #fff;
	padding: 10px;
}

/* for 12 column example */



.example-grid .column, .example-grid .columns {
    margin-bottom: 15px;
}

.example-grid .column, .example-grid .columns {
    background: none repeat scroll 0% 0% #EEE;
    text-align: center;
    border-radius: 4px;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 10px 0 10px 0;
    font-weight: 600;
    letter-spacing: 0.1rem;
}

.skeleton div {
    background: none repeat scroll 0% 0% #EEE;
    text-align: center;
    border-radius: 4px;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.1rem;
    padding: 10px 0 10px 0;
}






.wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto ;

}

@media (min-width: 550px) {

  .wrapper {
    display: grid;
    grid-template-columns: repeat(12, [col] 1fr );
    grid-template-rows: repeat(5, [row] auto) ;
    grid-column-gap: 1em;
    grid-row-gap: 15px;
  }

  .mainheader {
    grid-column: col / span 12;
    grid-row: row ;
    padding: 10px 0 10px 0;

  }

  .mainfooter {
    grid-column: col / span 12;
    grid-row: row 3 ;
  }

  .content {
    grid-column: col 5 / span 8;
    grid-row: row 2 ;
    margin: 0em 0 4em 0;
    


  }

  .panel {
    grid-column: col / span 4;
    grid-row: row 2 ;
  }
}