// remove padding so these classes can be used as grid-less container
.container,
.container-narrow {
  padding-left: 0;
  padding-right: 0;
}

.page-section {
  padding: $spacer-3;

  @include breakpoint(sm) { padding: $spacer-4; }

  @include breakpoint(md) { padding: $spacer-5; }

  @include breakpoint(lg) { padding: $spacer-6; }

  @include breakpoint(xl) { padding: $spacer-6; }

  .container,
  .container-narrow {
    & > *:first-child {
      margin-top: 0;
    }
  }

  hr {
    margin: $spacer-4 0;

    @include breakpoint(md) { margin: $spacer-5 0; }

    @include breakpoint(lg) { margin: $spacer-6 0; }

    @include breakpoint(xl) { margin: $spacer-8 0; }
  }
}

// more padding
.page-section-spacious {
  padding: $spacer-4;

  @include breakpoint(md) { padding: $spacer-6; }

  @include breakpoint(lg) { padding: $spacer-8; }

  @include breakpoint(xl) { padding: $spacer-6 * 2; }
}

.grid {
  padding-left: ($grid-gutter / 2);
  padding-right: ($grid-gutter / 2);
}

// Shady section

.bg-shade {
  min-height: 0;
  border: 1px solid darken($main-bg-color-shade, 8%);
  background: $main-bg-color-shade;
  background-image: linear-gradient(#f6f6f6 0, #fff 325px);

  hr {
    border-color: darken($main-bg-color-shade, 12%);
  }
}
