$height: 200px;
$font-size: 36px;

/**
 * A hero Jumbotron like component that acts as a visual container for sub-components.
 *   Sub-components will be visually centered along either axis
 */
.nacho-hero {
  @include flex-column-center;
  height: $height;
  background-color: $brand-color;
  color: $text-invert-color;

  /**
   * The contained element or body of the hero
   */
  &__content {
    width: 40%;
  }

  /**
 * The header element of the hero
 */
  &__header {
    font-size: $font-size;
    line-height: $font-size;
    margin: 20px 0;
  }
}