/**
 * @file
 * Header image. The image comes from a field formatter, hence the element
 * selector.
 */

.header-image {
  max-height: 200px;
  overflow: hidden;
  background-color: var(--imtm-color-white);
}

.header-image img {
  width: 100%;
  min-height: 200px;
  max-height: 200px;
  vertical-align: middle;
  object-fit: cover;
}

/* Very wide screens: the image keeps its native width (1920 px, image style
   page_header_image) in the centre and fades into a blurred, darkened copy of
   itself at the sides – same treatment as the front page carousel. */
@media (min-width: 1921px) {
  .header-image {
    position: relative;
    background-color: var(--imtm-color-darkblue);
  }

  .header-image::before {
    position: absolute;
    inset: -40px;
    content: "";
    background: var(--header-image-backdrop) center / cover no-repeat;
    filter: blur(28px) brightness(0.85) saturate(1.1);
  }

  .header-image__frame {
    position: relative;
    width: 1920px;
    margin: 0 auto;
  }

  .header-image__frame img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}