//TODO: remove .main-container with refactor. Old legacy class that needs to be replaced with proper namespaced .c-page class.
.main-container,
.c-page {
  position: relative;
  margin-top: $header-height--small-breakpoint;
  transition: all .2s ease;
  width: 100%; //Needed so main c-page container always fills the space available.
  padding-bottom: $spacing-unit-xlarge;

  @include breakpoint('768px'){
    margin-top: $header-height--large-breakpoint; //Offset top due to fixed position header. Need to revisit.
  }
  
  .admin-menu & {
    margin-top: ($admin-menu-height * 4) + $header-height--small-breakpoint;
    
    @media screen and (min-width: $admin-menu-small-breakpoint){
      margin-top: ($admin-menu-height * 3) + $header-height--small-breakpoint;
    }
    
    @media screen and (min-width: $admin-menu-medium-breakpoint){
      margin-top: ($admin-menu-height * 2) + $header-height--small-breakpoint;
    }
    
    @media screen and (min-width: 768px){
      margin-top: ($admin-menu-height * 2) + $header-height--large-breakpoint;
    }
    
    @media screen and (min-width: $admin-menu-large-breakpoint){
      margin-top: ($admin-menu-height * 1) + $header-height--large-breakpoint;
    }
  }
}