/* ===================================================
/* HEROES
/* ===================================================

// ====================================
// MIXINS
// ====================================
=create-hero
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: stretch
  // Elements
  &-header,
  &-footer 
    flex: 0
  &-body 
    flex:
      grow: 1
      shrink: 0
    padding: $hero-padding-body
  // Modifiers (Sizes)
  &.make-small
    padding: $hero-padding-small
  &.make-medium
    padding: $hero-padding-medium
  &.make-large
    padding: $hero-padding-large
  &.make-half-height,
  &.make-full-height
    // Elements
    .hero-body
      display: flex
      align-items: center
      // Elements
      > .wrapper
        flex:
          grow: 1
          shrink: 1
  &.make-half-height
    min-height: 50vh
  &.make-full-height
    min-height: 100vh       
  // Modifiers
  @each $type, $color in $hero-color-map
    &.make-#{$type}
      color: setTextColor($color)
      background: $color

// ====================================
// HERO
// ====================================
.hero
  +create-hero