@mixin content-container-layout {
  margin: auto;
  width: 90%;
}

//-----------------------------------------------------------------------
// Layout
//-----------------------------------------------------------------------

* {
  padding: 0;
  margin: 0;
  @include box-sizing(border-box);
}

html, body {
  overflow-x: hidden; // Allows .span-full to take up entire viewport without overflowing.
  overflow-y: auto;
}

img {
  max-width: 100%;
}  

#gc-container {
  max-width: $site-max-width;
  @include content-container-layout();
}

#gc-pagecontent {
  > .g-section {
    margin: $main-content-top-margin 0;
  }
}

main {
  margin-bottom: 50px;
  position: relative;
}

footer[role="contentinfo"] {
  padding: 40px 0 50px;
}

// Phone
@media only screen and (max-width: $break-small)  { 
  #gc-container {
    width: auto;
  }
  #gc-pagecontent {
    @include content-container-layout();

    > .g-section {
      margin: $main-content-top-margin / 2 0;
    }
  }
  footer[role="contentinfo"]  {
    padding: $main-content-top-margin / 2 $main-content-top-margin - 10;
  }
}

// Tablet
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large) { 
  #gc-container {
    width: 95%;
  }
}

@media only screen and (min-width: $break-large)  { 

}