// Due to adding in the side-nav, on qpp-ui we need to start
// phasing out bootstrap's default containers to make it more responsive

.responsive-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;

  @include breakpoint(sm) {
    max-width: $screen-sm;
  }
  @include breakpoint(md) {
    max-width: $screen-md;
  }
  @include breakpoint(lg) {
    max-width: $screen-lg;
  }

  &.tight {
    max-width: 800px;
  }

  &.tighter {
    max-width: 500px;
  }
}

// The bootstrap container class causes issues with our
// sm/md/lg breakpoints. Will remove this once we make changes
// to legacy containers.

.container {
  &.tight {
    max-width: 800px;
  }
}