/* Shared photographic headers for every core area and its subpages. */
body[data-current-page="biologi"] .article-page.article-surface.biology-photo-page {
  --photo-header-gutter: clamp(36px, 4vw, 56px);
  padding-top: 0;
  padding-inline: var(--photo-header-gutter);
}

body[data-current-page="biologi"] .biology-photo-page > .biology-photo-header {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  width: auto;
  max-width: none;
  min-height: 330px;
  aspect-ratio: 3 / 1;
  margin: 0 calc(-1 * var(--photo-header-gutter));
  padding: 34px var(--photo-header-gutter);
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid #18332f;
  border-radius: 0;
  background: #102523;
  box-shadow: none;
  text-align: left;
}

body[data-current-page="biologi"] .biology-photo-header > .biology-photo-header-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 65% center;
  border: 0;
  border-radius: 0;
}

body[data-current-page="biologi"] .biology-photo-header::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 22, 23, 0.92) 0%, rgba(7, 22, 23, 0.78) 27%, rgba(7, 22, 23, 0.45) 51%, rgba(7, 22, 23, 0.04) 78%);
}

body[data-current-page="biologi"] .biology-photo-header-copy {
  width: 62%;
  min-width: 0;
  max-width: 660px;
}

body[data-current-page="biologi"] .biology-photo-header .article-title {
  margin: 0;
  color: #fff;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: left;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
}

body[data-current-page="biologi"] .biology-photo-header .article-subtitle {
  max-width: 470px;
  margin: 18px 0 0;
  color: #f0f6f4;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  text-wrap: pretty;
}

body[data-current-page="biologi"] .biology-photo-header + :is(.article-content, .article-section, .biology-topic-hero-shot, .biology-core-existing-content, .biology-core-area-placeholder, .biology-core-area-subpage-placeholder) {
  margin-top: 32px;
}

body[data-current-page="biologi"] .biology-photo-header[data-header-topic="evolutionsbiologi"] > .biology-photo-header-image {
  object-position: right center;
}

@media (max-width: 1180px) {
  body[data-current-page="biologi"] .biology-photo-header .article-title {
    font-size: 40px;
  }
}

@media (max-width: 960px) {
  body[data-current-page="biologi"] .article-page.article-surface.biology-photo-page {
    --photo-header-gutter: 20px;
  }

  body[data-current-page="biologi"] .biology-photo-page > .biology-photo-header {
    min-height: 310px;
  }
}

@media (max-width: 600px) {
  body[data-current-page="biologi"] .biology-photo-page > .biology-photo-header {
    min-height: 350px;
    aspect-ratio: auto;
    align-items: end;
    padding: 170px 20px 26px;
  }

  body[data-current-page="biologi"] .biology-photo-header > .biology-photo-header-image {
    height: 100%;
    object-position: 68% center;
  }

  body[data-current-page="biologi"] .biology-photo-header::after {
    background: linear-gradient(180deg, rgba(7, 22, 23, 0.02) 0%, rgba(7, 22, 23, 0.12) 28%, rgba(7, 22, 23, 0.83) 54%, rgba(7, 22, 23, 0.98) 100%);
  }

  body[data-current-page="biologi"] .biology-photo-header-copy {
    width: 100%;
    max-width: none;
  }

  body[data-current-page="biologi"] .biology-photo-header .article-title {
    font-size: 29px;
    line-height: 1.12;
    hyphens: auto;
  }

  body[data-current-page="biologi"] .biology-photo-header .article-subtitle {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
  }
}