.header--404 {
  // hide all content except logo in case top menu is always rendered
  .breadcrumb,
  .navigation__menu--sub {
    display: none;
  }

  .logo {
    & {
      display: block;
    }
  }

  .content-block__description {
    @include font-style('title--m');
    margin-top: 0;
  }
  // viewport s - m
  @include viewport--l('inversed') {
    .header__content {
      padding-top: $header-404-content-spacing-top;
    }

    .content-block__title > span {
      display: inline;
    }
  }
  // viewport l
  @include viewport--l {
    .header__content {
      padding-bottom: $header-404-content-spacing-bottom--l;
    }

    .content-block__title > span {
      display: $header-404-title-content-display--l;
    }

    .content-block__description {
      margin-top: $header-404-description-spacing-top--l;
    }
  }
}