/*
---
name: hero()
category:
  - core/abstract
---
Abstract hero component

### scss
```scss
@use "node_modules/sass-basis/src/css/core";

.c-hero {
  @include core.hero();
  padding: var(--_padding1);

  &__header {
    margin-bottom: var(--_margin1);
  }

  &__footer {
    margin-top: var(--_margin1);
  }
}
```

### html
```ejs
<div class="c-hero">
  <div class="c-hero__header">
    ...
  </div>
  <div class="c-hero__content">
    ...
  </div>
  <div class="c-hero__footer">
    ...
  </div>
</div>
```
*/

@mixin hero() {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;

  &__header {
    @include hero__col();
    align-self: flex-start;
  }

  &__content {
    @include hero__col();
    align-self: center;
  }

  &__footer {
    @include hero__col();
    align-self: flex-end;
  }
}

@mixin hero__col() {
  flex: none;
  width: 100%;
  position: relative;
}