/* Fade the photograph itself; no separately positioned or repeating overlay. */
.gathering.account-dark::before {
  inset: auto;
  top: clamp(-160px, -11vw, -80px);
  left: 50%;
  width: 100%;
  max-width: 1500px;
  height: auto;
  aspect-ratio: 1672 / 941;
  transform: translateX(-50%);
  background: url(account-entry.png) center / 100% 100% no-repeat;
  opacity: .84;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 80%, transparent), linear-gradient(180deg, #000 35%, #000b 60%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 80%, transparent), linear-gradient(180deg, #000 35%, #000b 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (min-width: 1700px) {
  .gathering.account-dark::before {
    top: -180px;
    left: calc(50% + 150px);
  }
}

@media (max-width: 700px) {
  .gathering.account-dark::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    aspect-ratio: auto;
    transform: none;
    background-position: 74% 55px;
    background-size: auto 440px;
    opacity: .65;
    -webkit-mask-image: linear-gradient(180deg, transparent 70px, #000 175px, #000 310px, transparent 490px);
    mask-image: linear-gradient(180deg, transparent 70px, #000 175px, #000 310px, transparent 490px);
  }
}