.header {
  height: 95vh;
  background-image: linear-gradient(
      to right bottom,
      rgba($color-primary-light, 0.801),
      rgba($color-primary-dark, 0.808)
    ),
    url("../img/hero-small.jpg");
  background-size: cover;
  background-position: top;
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);

  @media (min-resolution: 192dpi) and (min-width: 600px),
    (-webkit-min-device-pixel-ratio: 192dpi) and (min-width: 600px),
    (min-width: 2000px) {
    // apple retina screen (high dpi)
    background-image: linear-gradient(
        to right bottom,
        rgba($color-primary-light, 0.801),
        rgba($color-primary-dark, 0.808)
      ),
      url("../img/hero.jpg");
  }

  @media (min-width: 2000px) {
    background-image: linear-gradient(
        to right bottom,
        rgba($color-primary-light, 0.801),
        rgba($color-primary-dark, 0.808)
      ),
      url("../img/hero.jpg");
  }

  @include respond(phone) {
    clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%);
  }

  position: relative;

  &__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
  }
  &__logo {
    height: 3.5rem;
  }

  /*
    .logo:hover{
        animation: moveInRight 1s ease-out;
    }
    */

  &__text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 
        * Limpiar animaciones para evitar temblores 
        * No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace
        */
    backface-visibility: hidden;
    text-align: center;
  }
}