/*
  Stackable sections with vertical padding.
  Intended to separate content sections within a .page-block.
  When nested directly within .page-width, first section will have top-padding removed, last section will have bottom-padding removed.
  Page block vs. Section block:
  More padding: page-block
  half that much padding: section-block
  Both can set block color, but should be set on parent page-block when possible.
  Standard usage will look lke .page-block > .page-width > .section-block + .section-block

  .section-block                   - default with padding bottom and top
  .section-block--border-top       - adds light grey 1px border to top
  .section-block--white            - white background
  .section-block--light            - light grey background
  .section-block--lowlight         - slate gray background with white text

  Styleguide Section Blocks.

*/

.section-block {
  @include marketing-borders;
  @include marketing-bg-colors;
  padding-top: em($gutter * 1.5);
  padding-bottom: em($gutter * 1.5);
  border-color: $color-grey-border-on--white;

  @include shopify-breakpoint($mobile) {
    padding-top: em($gutter);
    padding-bottom: em($gutter);
  }
}

.page-width {
  .section-block:first-child:not(:only-child) {
    padding-top: 0;
  }

  .section-block:last-child:not(:only-child) {
    padding-bottom: 0;
  }
}