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


  main {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: 100px, auto, 100px;
    margin: auto;
    gap: 20px;
    padding: 20px;
  }
  
  header.primary{
    background: rgba(0,0,0,.2);
    grid-column: 1/13;
    grid-row: 1/2;
  }

  #content {
    display: grid;
    grid-column: 1/13;
    grid-row: 2/3;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }

  #blog {
    background: rgba(0,0,0,.2);
    grid-column: 1/9;
    grid-row: 2/3;
  }

  aside {
    background: rgba(0,0,0,.2);
    grid-column: 9/13;
    grid-row: 2/3;
  }

  footer.primary {
    background: rgba(0,0,0,.2);
    grid-column: 1/13;
    grid-row: 3/4;
  }


/*-----Media Queries------*/

@media screen and(min-width:401px) {
  #content {
    grid-template-columns: 1fr;
  }

/*retina specific --- https://goo.gl/Pgu6y */


}