/* Shared article hero: visible editorial image, readable copy on white. */
.case-hero {
  background: #fff;
}

.case-hero .case-hero-bg {
  width: 56%;
  opacity: 1;
  object-position: right center;
  filter: saturate(1.06) contrast(1.08);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 18%, #000 42%);
}

.case-hero::after {
  content: "";
  display: block;
  background:
    linear-gradient(90deg,
      #fff 0%,
      rgba(255, 255, 255, .99) 38%,
      rgba(255, 255, 255, .94) 49%,
      rgba(255, 255, 255, .68) 58%,
      rgba(255, 255, 255, .16) 70%,
      rgba(255, 255, 255, 0) 82%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 43%,
      rgba(255, 255, 255, .95) 63%,
      #fff 78%);
}

.guide-hero .guide-kicker span {
  color: #516485;
  border-color: #dce7f7;
  background: #f5f9ff;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .case-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) 31%;
    gap: 20px;
  }

  .case-hero .hero-visual-spacer {
    display: block;
    min-height: 330px;
  }

  .case-hero .case-hero-bg {
    width: 52%;
    object-position: 75% center;
  }

  .case-hero::after {
    background:
      linear-gradient(90deg,
        #fff 0%,
        #fff 42%,
        rgba(255, 255, 255, .9) 52%,
        rgba(255, 255, 255, .24) 66%,
        rgba(255, 255, 255, 0) 82%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 48%,
        rgba(255, 255, 255, .95) 73%,
        #fff 88%);
  }
}

@media (max-width: 760px) {
  .case-hero .case-hero-bg {
    width: 100%;
    opacity: .9;
    object-position: 70% top;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .45) 28%, #000 65%);
  }

  .case-hero::after {
    background:
      linear-gradient(90deg,
        rgba(255, 255, 255, .96) 0%,
        rgba(255, 255, 255, .82) 48%,
        rgba(255, 255, 255, .48) 100%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .2) 30%,
        #fff 73%);
  }
}