.header {
  background-color: $color-light1;
  display: flex;
  align-items: center;
  height: $header-height;
  // Needed for overflow-x: hidden causes overflow-y: auto issue.
  position: relative;
  z-index: 1;

  svg {
    fill: $color-interactive1;
    display: block;
    height: 48px;
    width: 146px;
  }

  .iconlink-x-icon {
    flex-shrink: 0;
  }

  @media print {
    display: none;
  }
}

.header-map {
  display: flex;
  align-items: center;
  padding: $gridspacing * 2;
  height: auto;

  .header-x-title {
    @include textstyle-h1;
  }

  .header-x-text {
    @include textstyle-bodylarge;
    padding-left: 32px;
  }

  @media (min-width: $media-tablet) {
    padding-left: $gridspacing * 5;
    padding-right: $gridspacing * 5;
  }

  @media (min-width: $media-hd) {
    .header-x-title {
      font-size: 48px;
      line-height: 48px;
    }
  }
}