Heros

<div
  class="background-image mb-4"
  data-background-image=""
  data-background-position="center center"
  data-background-size="cover"
  data-background-repeat="no-repeat">
    <div class="background--navy-a80 text--size-xl text--center p-6">
      <i class="pi-bolt text--size-lg text--white"></i>
      <div class="text--white text--boldmt-4 mb-6 pb-6 text--size-xxxl text--white">Power Your World.</div>
      <p class="text--white text--size-md mb-0">Learn what you can do!</p>
      <i class="pi-angle-down text--white"></i>
     </div>
</div>

<div
  class="background-image block-container flex--justify-around p-4 mb-4"
  data-background-image=""
  data-background-position="center bottom"
  data-background-size="cover"
  data-background-repeat="no-repeat">
    <div class="block lg-tablet-up-5 py-4">
        <h3></h3>
        <p></p>
    </div>
    <div class="block lg-tablet-up-4 background--white-a70 border-t border--color-orange border--width-5 p-4">
      <p></p>
      <p></p>
    </div>
</div>