/* Final supplied photography. Layout, typography and UI remain in page.css.
 * No reference screenshots, generated cutouts or repaired photo patches.
 */
.hero-scenery {
  display: none;
}

.hero-visual {
  width: 100vw;
  right: calc((100vw - 100%) / -2);
}

.hero-person {
  top: -8%;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 135%;
  object-fit: cover;
  object-position: 70% 42%;
  transform: none;
  mask-image: linear-gradient(90deg, transparent 32%, #000 59%);
}

.people-note {
  left: 49%;
}

.planet-note {
  right: 4.5%;
}

.safety-visual > img {
  width: 100%;
  height: 100%;
  right: 0;
  object-fit: cover;
  object-position: right center;
  transform: none;
  mask-image: linear-gradient(90deg, transparent, #000 21%);
}

.safety-scenery {
  opacity: .5;
}

.safety-badge {
  width: auto;
  min-width: 346px;
  min-height: 0;
  right: 36px;
  bottom: 41px;
}

#video-chat .feature-photo > img {
  object-position: 50% 28%;
}

#live .feature-photo > img {
  object-position: 52% 26%;
}

#reels .feature-photo > img {
  object-position: 52% 35%;
}

#game .feature-photo > img {
  object-position: 52% 27%;
}

.people-photo {
  object-position: 64% 45%;
}

.bottom-cta {
  background-size: cover;
  background-position: center, center 54%;
  background-image:
    linear-gradient(0deg, #4426634d, #77438524),
    url('./media/final-cta-coast-background.webp');
}

@media (min-width: 1600px) {
  .hero-person {
    object-position: 70% 35%;
  }
}

@media (min-width: 761px) and (max-width: 1250px) {
  .safety-badge {
    min-width: 285px;
    right: 20px;
    bottom: 30px;
  }

  .people-note {
    left: 52%;
  }
}

@media (min-width: 761px) and (max-width: 1020px) {
  .hero-person {
    object-position: 64% center;
    mask-image: linear-gradient(90deg, transparent 34%, #000 63%);
  }

  .planet-note {
    right: 2%;
  }

  .safety-badge {
    min-width: 250px;
    right: 4px;
  }
}

@media (max-width: 760px) {
  .hero-visual {
    width: calc(100% + 40px);
    margin-left: -20px;
    right: auto;
  }

  .hero-person {
    top: 0;
    width: 100%;
    height: 100%;
    object-position: 74% center;
    mask-image: linear-gradient(180deg, transparent, #000 17%);
  }

  .planet-note {
    right: 17px;
  }

  .video-match-widget {
    right: 18px;
  }

  .safety-visual {
    width: calc(100% + 40px);
    margin-left: -20px;
  }

  .safety-visual > img {
    height: 100%;
    width: 100%;
    right: 0;
    object-position: 62% center;
    mask-image: linear-gradient(180deg, transparent, #000 14%);
  }

  .safety-note {
    left: 22px;
  }

  .safety-badge {
    min-width: 235px;
    min-height: 0;
    right: 18px;
    bottom: 26px;
  }

  .people-photo {
    object-position: 64% 42%;
  }

  .bottom-cta {
    background-size: cover;
    background-position: center, 54% 52%;
  }
}

@media (max-width: 374px) {
  .hero-visual,
  .safety-visual {
    width: calc(100% + 32px);
    margin-left: -16px;
  }

  .safety-badge {
    min-width: 213px;
    right: 16px;
    bottom: 22px;
  }
}