/*SIZE*/
/* COLORS */
/* FONT SIZE */
/* FONT FAMILY */
/* Media queries */
/* Ejemplo Uso
body{ 
    ...
    @include media-breakpoint-up($sm) {
        background:red;
    }
    @include media-breakpoint-up($md) {
        background:none;
    }
    ...   
}
*/
/* Ejemplo de uso:
p{
  @include text-truncate();
}
*/
/* Ejemplo de uso:
p {
  @include font-size(13);
  @include rhythm(13, 18);
}
*/
/* Ejemplo de uso:
p {
    @include fluid-type($min_width, $max_width, $min_font, $max_font);
}
*/
.block-hero {
  background-size: cover;
  min-height: 300px;
  margin-bottom: 30px;
  overflow: hidden;
  padding: 30px 0;
  position: relative;
}

@media (min-width: 480px) {
  .block-hero {
    min-height: 380px;
  }
}

@media (min-width: 1200px) {
  .block-hero {
    min-height: 480px;
    padding: 70px 0;
  }
}

.block-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.99) 0%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  height: 100%;
}

.block-hero .wrapper-hero {
  padding-top: 40px;
}

@media (min-width: 992px) {
  .block-hero .wrapper-hero {
    padding-top: 100px;
  }
}

@media (min-width: 1600px) {
  .block-hero .wrapper-hero {
    padding-top: 130px;
  }
}

.block-hero .wrapper-hero h1 {
  color: #ffffff;
}

.block-hero .wrapper-hero h1 strong {
  display: block;
}

.block-hero .wrapper-hero .wrap-images {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.block-hero .wrapper-hero .wrap-images img {
  max-height: 70px;
  width: auto;
  height: 100%;
}

.block-hero .wrapper-hero .wrap-images p {
  margin-right: 20px;
}

.block-hero .wrapper-hero .wrap-images p:last-of-type {
  margin-right: 0;
}

@media (min-width: 992px) {
  .block-hero .wrapper-hero .wrap-images img {
    max-width: 300px;
    max-height: 100%;
    width: auto;
    height: auto;
  }
}