Banners

<div class="banner">
  <div class="banner_inner">
    <h1 class="banner_heading">Page title</h1>
    <p class="banner_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac sagittis velit. Proin sit amet magna vehicula, volutpat nulla vitae, eleifend sapien.</p>
  </div>
</div>

Template

@mixin bannerVariables
/*  1. vertical spacing ..... */  1rem,
/*  2. padding top .......... */  var(--banner-padding-top),
/*  3. padding bottom ....... */  var(--banner-padding-bottom),
/*  4. padding left ......... */  var(--banner-padding-left),
/*  5. padding right ........ */  var(--banner-padding-right),
/*  6. bg color ............. */  var(--banner-bg-color),
/*  7. heading color ........ */  var(--banner-heading-color),
/*  8. content color ........ */  var(--banner-content-color),
/*  9. heading font size .... */  var(--banner-heading-font-size),
/* 10. content font size .... */  var(--banner-content-font-size),
/* 11. content line height .. */  var(--banner-content-line-height),
/* 12. max line length ...... */  var(--banner-max-line-length),
/* 13. border color ......... */  var(--banner-border-color),
/* 14. border width top ..... */  var(--banner-border-top-width),
/* 15. border width bottom .. */  var(--banner-border-bottom-width),
/* 16. border width left .... */  var(--banner-border-left-width),
/* 17. border width right ... */  var(--banner-border-right-width),
/* 18. inner max width ...... */  var(--banner-max-width),
/* 19. v offset ............. */  var(--banner-v-offset);

@mixin bannerSelectors
/*  1. container ............ */  .banner,
/*  2. inner ................ */  .banner_inner,
/*  3. heading .............. */  .banner_heading,
/*  4. content .............. */  .banner_content;