.nsw-hero-banner {
  $parent: &;
  position: relative;

  @include breakpoint('md') {
    height: rem(380px);
    overflow: hidden;
  }

  &__image-area {

    @include breakpoint('md') {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }

  &__image {
    @include break-out;
    height: auto;
    display: block;

    @include breakpoint('md') {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border-bottom: 0;
    }
  }

  &__content-area {
    @include break-out;

    @include breakpoint('md') {
      @include break-out-reset;
      height: rem(380px);
      width: 100%;
    }
  }

  &__content {
    @include font-stack;
    @include font-size('md');
    @include nsw-spacing(padding, md);
    background-color: $light20;
    border-top: solid 6px $nsw-primary-highlight;

    @include breakpoint('md') {
      @include nsw-spacing(padding, md lg);
      position: relative;
      top: 50%;
      background-color: map-get($overlays, light);
      transform: translateY(-50%);
      max-width: rem(600px);
      left: rem(-16px);
    }

    p {
      margin: 0;
    }

    * + p {
      @include nsw-spacing(margin-top, md);
    }

    &:focus-within {
      @include nsw-focus;

      .nsw-hero-banner__link {
        text-decoration: none;
      }
    }
  }

  &__title {
    @include font-stack('heading');
    @include font-size('xxl');
    @include nsw-spacing(margin, none);
  }

  &__icon {
    @include nsw-spacing(margin, md none none none);
  }

  &__link {
    @include pseudo-clickable-block;
    text-decoration: none;
    color: $dark80;

    &:hover {
      text-decoration: underline;
    }

    &:focus {
      outline: none;
      text-decoration: underline;
    }
  }

  &--dark {
    #{$parent}__content {
      color: $white;
      background-color: $dark80;

      @include breakpoint('md') {
        background-color: map-get($overlays, dark);;
      }
    }

    #{$parent}__link {
      color: $white;
    }

    #{$parent}__icon {
      fill: $white;
    }
  }
}
