.mf-eih {
  --mf-eih-u: 0.0520833333vw;
  --mf-eih-mobile-bar: 1vh;
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #111;
  font-family: var(--mf-font-body, "Schibstedgrotesk", Arial, sans-serif);
  text-rendering: optimizeSpeed;
}

.mf-eih,
.mf-eih *,
.mf-eih *::before,
.mf-eih *::after {
  box-sizing: border-box;
}

.mf-eih__media-scale,
.mf-eih__media-parallax {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.mf-eih__image,
.mf-eih__media-empty {
  display: block;
  width: 100%;
  height: 100%;
}

.mf-eih__image {
  object-fit: cover;
  object-position: var(--mf-eih-image-x) var(--mf-eih-image-y);
  pointer-events: none;
  user-select: none;
}

.mf-eih__media-empty {
  background: #2c2c2c;
}

.mf-eih__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: calc(38 * var(--mf-eih-u)) calc(30 * var(--mf-eih-u));
}

.mf-eih__title {
  width: 100%;
  max-width: calc(700 * var(--mf-eih-u));
  margin: 0;
  /* 0.9 matches ProjectDetailHero's title pitch (same size/font/tracking) and
     leaves visible air between lines; 0.8 let ascenders touch descenders. */
  font: 400 calc(80 * var(--mf-eih-u)) / 0.9
    var(--mf-font-body, "Schibstedgrotesk", Arial, sans-serif);
  letter-spacing: -0.03em;
}

.mf-eih__accent {
  font-family: var(--mf-font-body, "Schibstedgrotesk", Arial, sans-serif);
  letter-spacing: -0.03em;
}

.mf-eih__title {
  --mf-eih-line-offset: 0.5em;
}

.mf-eih__split-line-mask .mf-eih__split-line,
.mf-eih__split-line-mask .mf-eih__split-word {
  margin-top: calc(var(--mf-eih-line-offset) * -1);
  margin-bottom: calc(var(--mf-eih-line-offset) * -1);
  padding-top: calc(var(--mf-eih-line-offset) / 2);
  padding-bottom: calc(var(--mf-eih-line-offset) / 2);
}

.mf-eih__split-line-mask:first-child .mf-eih__split-line,
.mf-eih__split-line-mask:first-child .mf-eih__split-word {
  margin-top: calc(var(--mf-eih-line-offset) * -0.5);
}

.mf-eih__split-line-mask:last-child .mf-eih__split-line,
.mf-eih__split-line-mask:last-child .mf-eih__split-word {
  margin-bottom: calc(var(--mf-eih-line-offset) * -0.5);
}

.mf-eih__split-word {
  will-change: transform;
}

@media (max-width: 767.98px) {
  .mf-eih {
    --mf-eih-u: 0.2666666667vw;
    height: calc(100vh - var(--mf-eih-mobile-bar));
  }

  .mf-eih__content {
    flex-direction: column;
    gap: calc(20 * var(--mf-eih-u));
    padding: calc(20 * var(--mf-eih-u)) calc(15 * var(--mf-eih-u));
  }

  .mf-eih__title {
    max-width: 100%;
    font-size: calc(30 * var(--mf-eih-u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-eih__media-scale,
  .mf-eih__media-parallax,
  .mf-eih__split-word {
    transform: none !important;
  }
}