// ============================================================================
// :: Section
// ============================================================================
/**
 * Used to divide the page in different sections. This is a very dynamic
 * component. It does NOT respresent the <section> element, it can be used on
 * a <div> or an <article> as well.
 *
 * This component can have a header with a title or a footer, but it is not
 * required. Usely the component is used with l-container to limit the width
 * of the content.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-section {
  position: relative;

  padding: 5rem 0;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-section__header {
  margin-bottom: 4rem;
}

.bp-section__title {
  font-weight: $bp-font-weight-bold;
}

.bp-section__intro {
  margin-bottom: 6rem;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.bp-section--padding-vertical-large {
  padding: 10rem 0;
}

.bp-section--grey {
  background-color: $bp-background-color-medium-light;
}