/* Match the cards' container so the photograph ends at the same right edge. */
.hero-background {
  display: block;
  width: min(100% - 48px, 1240px);
  margin-inline: auto;
  background: transparent;
  pointer-events: none;
}

.hero-background img {
  position: absolute;
  top: -5%;
  right: 0;
  width: auto;
  max-width: none;
  height: 110%;
  /* Fade the actual image edges; the broad right fade ends gently at zero opacity. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 5%, rgba(0, 0, 0, .35) 12%, rgba(0, 0, 0, .75) 22%, #000 34%, #000 74%, rgba(0, 0, 0, .95) 78%, rgba(0, 0, 0, .79) 82%, rgba(0, 0, 0, .56) 86%, rgba(0, 0, 0, .32) 90%, rgba(0, 0, 0, .13) 94%, rgba(0, 0, 0, .015) 98%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 5%, rgba(0, 0, 0, .35) 12%, rgba(0, 0, 0, .75) 22%, #000 34%, #000 74%, rgba(0, 0, 0, .95) 78%, rgba(0, 0, 0, .79) 82%, rgba(0, 0, 0, .56) 86%, rgba(0, 0, 0, .32) 90%, rgba(0, 0, 0, .13) 94%, rgba(0, 0, 0, .015) 98%, transparent 100%);
}

.hero-background::after {
  background: none;
  opacity: 1;
}

html[data-theme=dark] .hero-background {
  background: transparent;
}

html[data-theme=dark] .hero-background img {
  filter: brightness(.65);
}

html[data-theme=dark] .hero-background::after {
  background: none;
}

@media (max-width: 820px) {
  .hero-content {
    display: flex;
    align-items: flex-start;
    min-height: 560px;
    padding-block: 32px 290px;
  }

  .hero-copy {
    padding-top: 0;
  }

  .hero-background {
    width: 100%;
    top: auto;
    height: 300px;
  }

  .hero-background img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-background::after {
    background: linear-gradient(180deg, #eef4f8 0%, rgba(238, 244, 248, .5) 18%, transparent 45%);
  }

  html[data-theme=dark] .hero-background::after {
    background: linear-gradient(180deg, #0c1622 0%, rgba(12, 22, 34, .65) 18%, rgba(12, 22, 34, .12) 55%);
  }
}