.site-content {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 86px);
  width: 100%;

  &__nav {
    flex-basis: 25%;
    max-width: 25%;
    display: none;

    @include media($nav-width) {
      display: block;
      position: -webkit-sticky;
      position: sticky;
      top: 3.75rem;
      bottom: 0;
      height: calc(100vh - 3.75rem);
      overflow-y: auto;
      flex-basis: 30%;
      min-width: 15.625rem; // the lack of this causes the sidenav to not display at 840px for some odd reason
      max-width: 17.5rem;
    }
  }

  &__content {
    flex-basis: 100%;
    max-width: 100%;
    padding: $units-3 $units-3 0 $units-3;

    @include media($nav-width) {
      flex-basis: 75%;
      max-width: 85em; // similar to production and USWDS
      padding: units(5) $units-8 0 $units-8;
    }

    @include media($desktop-lg) {
      // something funky happens at this breakpoint that shifts
      // the main content well up (likely due to not using usa-grid)
      padding-top: units(7);
    }
  }

  &__section-name {
    display: inline-block;
    color: $color-gray-dark;
    border-bottom: 3px solid $color-primary;
  }
}

.site-l-wrapper {
  padding: 0 units(3);

  @include media($nav-width) {
    padding: 0 units(5);
  }

  @include media($desktop-lg) {
    padding: 0 units(10);
  }
}

.site-l-wrapper--center {
  margin-left: auto;
  margin-right: auto;
}
