// -------------------------------------------
// General Layout Variations
// -------------------------------------------

// .page-boxed
// -------------------------------------------
.page-boxed {
  #header,
  #highlighted,
  #content,
  #content-below,
  #footer {
    margin-left: auto;
    margin-right: auto;
  }
  #header,
  #content {
    background-color: white;
  }
}

// $Responsive 
// -------------------------------------------
@include media-breakpoint-up(sm) {
  .page-boxed {
    #header,
    #highlighted,
    #content,
    #content-below,
    #footer {
      max-width: $container-max-width-md + $layout-boxed-padding;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
    #footer {
      border-left-color: #333;
      border-right-color: #333;
    }    
  }
}
@include media-breakpoint-up(md) {
  .page-boxed {
    #header,
    #highlighted,
    #content,
    #content-below,
    #footer {
      max-width: $container-max-width-lg + $layout-boxed-padding;
    }
  }
}
@include media-breakpoint-up(lg) {
  .page-boxed {
    #header,
    #highlighted,
    #content,
    #content-below,
    #footer {
      max-width: $container-max-width-xl + $layout-boxed-padding;
    }
  }
}