.promo-header {
  @include breakpoint($screen-md-max) {
    min-height: 500px;
  }
}

.promo-header__content {
  .promo-header--default:not(.promo-header--video):not(.promo-header--no-image) & {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 100%;
    transform: translateY(-50%);

    .promo-header__content-inner {
      margin: 0 auto;

      h1 {
        // Remove the stock h1 margin-bottom to keep it properly vertically aligned
        margin-bottom: 0;
        text-shadow: 0 0 50px rgba(0,0,0,0.50);
      }
    }
  }

  p {
    .promo-header--feature & {
      color: $colour-dark-blue-lighter;
    }
  }
}

/* As we can't maintain the ratio, at least set a height on 
 * browsers that can't display objectfit our promo feature image */
.promo-header__bg-image.compat-object-fit {
  min-height: 300px;

  @include breakpoint($screen-md) {
    min-height: 400px;
  }

  @include breakpoint($screen-lg) {
    min-height: 500px;
  }
}

/* Override offsets from the base theme */
header[role=banner].sticky-nav__header ~ main .promo-header--default:not(.promo-header--video):not(.promo-header--no-image)
 .promo-header__content .promo-header__content-inner {
  padding: 20px;

  @include breakpoint($screen-md) {
    margin-top: 0;
    padding: 0;
  }

  @include breakpoint($screen-lg) {
    margin-top: 0;
  }
}