.header {
  position: relative;

  &__content {
    padding-bottom: $header-content-spacing-bottom;
    padding-top: $header-content-spacing-top;
    // add position and z-index to stack above animation
    position: relative;
    z-index: 1;
  }

  .content-block__title {
    &,
    & h1 {
      @include font-style('title--m');
    }
  }

  .content-block__title--s {
    &,
    & h1 {
      @include font-style('title--s', 'title--l');
    }
  }

  // large
  &--l .content-block__title {
    &,
    & h1 {
      @include font-style('title--l');
    }
  }

  &__bottom-text {
    margin-top: $spacing--s;

    p:last-child {
      margin-bottom: 0;
    }
  }
}

// viewport s - l
@include viewport--l('inversed') {
  // hide all media except animation
  .header__media:not(.media-block--animation) {
    display: none;
  }
}

// viewport l
@include viewport--l {
  .header {
    &__wrapper {
      display: flex;
      flex-wrap: wrap;

      .header--s & {
        padding-bottom: $spacing--m;
      }
    }

    &__content {
      padding-bottom: $header-content-spacing-bottom--l;
      padding-top: $header-content-spacing-top--l;
      width: grid-columns(6, 12);
      z-index: 2;

      + .header__media:not(.media-block--full-width) {
        width: grid-columns(6, 12);
      }

      // large - extra large
      &--l-xl {
        width: grid-columns(7, 12);
      }

      &--l-xl + .header__media:not(.media-block--full-width) {
        width: grid-columns(5, 12);
      }
      // extra large
      &--xl {
        width: grid-columns(9, 12);
      }
      // full width
      &--full-width {
        width: 100%;
      }
    }
    // large
    &--l .header__content {
      padding-bottom: $spacing--xxl;
      padding-top: $spacing--xl;
    }

    .content-block__title {
      overflow-wrap: normal;
    }

    .media-block:not(.media-block--full-width) img {
      left: 0;
      right: 0;
    }

    //gradient color overlay for readability nav items
    .header__media {
      picture:before {
        content: ' ';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
      }

      &.light-from-l picture:before {
        background: linear-gradient(
          180deg,
          rgba(15, 25, 65, 0.5) 20%,
          rgba(15, 25, 65, 0) 60%
        );
      }

      &.dark-from-l picture:before {
        background: linear-gradient(
          180deg,
          rgba(247, 245, 240, 0.7) 0%,
          rgba(247, 245, 240, 0) 60%
        );
      }
    }
  }
}
