.gradient-banner {
  background: -webkit-gradient(linear, left top, left bottom, from(#d6d0c2), color-stop(84.37%, rgba(214, 208, 194, 0)));
  background: linear-gradient(180deg, #d6d0c2 0%, rgba(214, 208, 194, 0) 84.37%);
  z-index: 1;
}

.gradient-banner__content .intro-text {
  margin-top: 8rem !important;
}

/* --- variant: with-image ------------------------------------------------ */
.gradient-banner--with-image {
  background: none;
  height: 100%;
  max-height: 100%;
}
.gradient-banner--with-image .gradient-banner__content {
  height: 32.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.gradient-banner--with-image .gradient-banner__content h1 {
  color: var(--white);
}
.gradient-banner--with-image .gradient-banner__content p {
  display: none;
}

/* --- breakpoints -------------------------------------------------------- */
@media (min-width: 767.91px) {
  .gradient-banner--with-image {
    max-height:100%;
    height:100%;
  }
  .gradient-banner--with-image .gradient-banner__content {
    height: 67rem;
  }
  .gradient-banner__content .intro-text {
    margin-top: 4rem;
  }
}
@media (min-width: 1200px) {
  .gradient-banner__content p {
    letter-spacing: 0.45px;
  }
  .gradient-banner--with-image {
    height: 100%;
    max-height:100%;
  }
  .gradient-banner--with-image .gradient-banner__content {
    height: 89rem;
    margin-top: 0;
  }
  .reduced--height--banner.gradient-banner--with-image .gradient-banner__content {
    height: 89rem;
    margin-top: -190px;
  }
}