/*------------------------------------*\
  C01- Hero
  Description: Encabezado, subtítulo, background img
  Type: Banner
  Path: /components/Hero.vue
\*------------------------------------*/

/**
  * Class: .ay-c-hero
  * @structure C01 Hero
  * @modifiers
  *  .ay-c-hero_second background second
  *  .ay-c-hero_third background third
  *  .ay-c-hero_fourth background fourth
  *  .ay-c-hero_fifth background fifth
  * @flag full-width
  * @description  Type: banner, contiene el título principal de la página
  * @section Banner
  * @markup
  *  <header class="ay-c-hero">
  *    @{include:.ay-c-hero__title}
  *    @{include:.ay-c-hero__subtitle}
  *  </header>
  * @script
  *   header.ay-c-hero(:class='heroBackground')
  *     h1.ay-c-hero__title {{ heroTitle }}
  *     p.ay-c-hero__subtitle {{ heroSubtitle }}
  */

.ay-c-hero {
  @include flexbox;
  @include flex-direction(column);
  @include align-items(center);
  @include justify-content(center);
  width: 100%;
  height: 80px;
  margin-bottom: 10px;
  color: $c-neutro;
  text-align: center;
  background: url("#{$img-path}/hero_first.jpg") $c-primary no-repeat center center;
  background-size: cover;

  &_second {
    background-image: url("#{$img-path}/hero_second.jpg");
  }

  &_third {
    background-image: url("#{$img-path}/hero_third.jpg");
  }

  &_fourth {
    background-image: url("#{$img-path}/hero_fourth.jpg");
  }

  &_fifth {
    background-image: url("#{$img-path}/hero_fifth.jpg");
  }
}
/**
  * Class: .ay-c-hero__title | font-family: Akrobat-Bold | font-size: 22px
  * @atom C01 Hero | Element: __title
  * @section Títulos
  * @markup
  *  <h1 class="ay-c-hero__title">
  *     Título Hero
  *    </h1>
  */
.ay-c-hero__title {
  @include font-rem(22px);
  font-family: $f-bold;
}
/**
  * Class: .ay-c-hero__subtitle | font-family: Akrobat-SemiBold | font-size: 20px
  * @atom C01 Hero | Element: __subtitle
  * @section Títulos
  * @markup
  *   <p class="ay-c-hero__subtitle">
  *      Subtitle Hero
  *    </p>
  */
.ay-c-hero__subtitle {
  @include font-rem(20px);
  font-family: $f-semibold;
}