// comes from design specs
$height: 144px;
$font-size: 24px;

/**
 * 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;
  margin: item-spacing(0 0 5 0);

  /**
 * The header element of the hero
 */
  &__header {
    font-size: $font-size;
    line-height: $font-size;
    margin: item-spacing(0 0 5 0);
  }
}