/*
 * Page header: photo 65% of the screen height, dark shade at the bottom, title in the middle.
 * Values measured on the live site (/profil) at 375 / 768 / 1366 / 1920 px.
 */

.page-header {
  position: relative;
}

.page-header-image {
  height: 65vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* shade: transparent at the top, darker at the bottom */
.page-header-shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-image: var(--color-breadcrumb-gradient);
}

.page-header-title {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 96;
  width: 90%;
  margin: 0 5%;
  text-align: center;
  transition: 0.5s;
}

/* "Noto Serif" is not loaded as a web font on the live site either (see design-tokens.json) */
.page-header-title span {
  display: inline-block;
  margin-top: 23vh;
  font-family: var(--font-page-title);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-base);
  color: var(--color-white);
  text-shadow: var(--shadow-title);
}

@media (max-width: 560px) {
  .page-header-title span {
    line-height: 36px;
  }
}