//
// Hero
//
// .c-hero {
//   _hero();
// }
//
// <div class="c-hero">
//   <div class="c-hero__header">
//     ...
//   </div>
//   <div class="c-hero__content">
//     ...
//   </div>
//   <div class="c-hero__footer">
//     ...
//   </div>
// </div>
//

_hero() {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;

  &__header {
    _hero__col();
    align-self: flex-start;
  }

  &__content {
    _hero__col();
    align-self: center;
  }

  &__footer {
    _hero__col();
    align-self: flex-end;
  }
}

_hero__col() {
  flex: 0 1 100%;
  max-width: 100%;
  position: relative;
}