.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;
  }

  &__text-container {
    padding-top: 20px;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: grid-gutter('l');

    @include viewport--l {
      flex: 0 0 grid-columns(7, 12);
      padding-top: 50px;
      padding-bottom: 80px;
    }

    &--large {
      @include viewport--l {
        padding-top: 130px;
        padding-bottom: 130px;
      }
    }
  }

  &__media-container {
    bottom: 0;
    display: none;
    max-width: 600px;
    position: absolute;
    right: 100px;

    @include viewport--l {
      display: block;

      img {
        position: relative;
        top: 50px;
      }
    }
  }

  &--alternative {
    .header__text-container {
      margin-left: auto;
    }

    .header__media-container {
      right: auto;
    }
  }

  &.header--split-view {
    @include viewport--l('inversed') {
      .header__text-container {
        padding-top: 30px;
      }
      .header__media-container {
        display: block;
        position: relative;
        right: auto;
        left: auto;
        margin: 0 auto;
        padding: 0 85px;
      }
    }
  }

  .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%
        );
      }
    }
  }
}