.hero-blur {
  height: 100%;
  opacity: 0;
  background-position: top center;
  background-repeat: no-repeat;
  @include clearfix;
  @include transition(opacity 1s ease-in);
}

.hero-block-blur {
  position: relative;
  margin-top: 150px;
  opacity: 0;
  @include box-shadow(rgba(color('gray'), 0.25), 0, 4px, 2px);
  @include transition(opacity 1s ease-in);

  @media (min-width: $screen-lg) {
    margin-top: 250px;
    margin-bottom: 50px;
  }
  @media (min-width: $screen-xl) {
    margin-top: 300px;
    margin-bottom: 100px;
  }
  &.hero-block-side {
    @extend .hero-block-side;
  }
}
.hero-block-blur-visible,
.hero-blur-visible {
  opacity: 1.0;
}