// @page Pattern Library/Components
// @name Content group
// 
// @description
//   The `.us-content-group` is a separator element for content groupings. Ideal to split up landing pages with reasonable padding.
//
// @state .mobile-bordered - Adds a smaller border and padding to mobile devices.
//
// @markup
//  <div class='us-content-group {$modifiers}'>
//    <p>
//      Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.
//    </p>
//  </div>

$content-group-border-color: $c-keylinegrey !default;

.us-content-group,
%us-content-group {
  @include respond-to($default-grid-breakpoint, true) {
    padding-top: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid $content-group-border-color;
  }

  &.mobile-bordered {
    @include respond-to(to-#{$default-grid-breakpoint}) {
      padding-top: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid $content-group-border-color;
    }
  }
}