/* Keep the family visible while giving the headline its own space. */
.hero-family-focus .hero-landscape {
  object-position: right 58%;
}

.hero-family-focus .hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(8, 12, 26, 0.76),
      rgba(8, 12, 26, 0.42) 42%,
      transparent 75%
    ),
    linear-gradient(
      0deg,
      #090b13,
      transparent 22%,
      transparent 80%,
      rgba(8, 10, 25, 0.35)
    );
}

@media (max-width: 860px) {
  .hero-family-focus {
    background: #0b172c;
    min-height: max(780px, 100svh);
    align-items: flex-start;
  }

  .hero-family-focus .hero-content {
    padding-top: 140px;
    padding-bottom: 330px;
  }

  .hero-family-focus .hero-landscape {
    inset: auto -48px 30px auto;
    width: 960px;
    height: 540px;
    max-width: none;
    object-fit: cover;
    object-position: center;
    animation: none;
  }

  .hero-family-focus .hero-shade {
    background:
      linear-gradient(
        180deg,
        #0b172c 0%,
        #0b172c 29%,
        rgba(11, 23, 44, 0.9) 43%,
        transparent 65%
      ),
      linear-gradient(
        0deg,
        #090b13 0%,
        rgba(9, 11, 19, 0.2) 11%,
        transparent 24%
      );
  }
}

@media (max-width: 600px) {
  .hero-family-focus .hero-content {
    padding-top: 130px;
  }
}