/* Keep the locality photograph visible across the full page header. */
.local-hero-photo {
  display: block;
  min-height: 580px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #251a1e;
}

.local-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(18, 15, 17, .66) 0%,
    rgba(18, 15, 17, .46) 48%,
    rgba(18, 15, 17, .18) 100%);
}

.local-hero-photo > .container {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 75px 48px 105px;
}

.local-hero-scene {
  position: absolute;
  inset: 0;
  z-index: auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.local-hero-scene > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.local-hero-scene > p {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 14px;
  left: auto;
  max-width: calc(100% - 40px);
  margin: 0;
  padding: 8px 12px;
  background: rgba(17, 17, 17, .72);
  color: #fff;
  font-size: 11px;
}

.local-hero-scene > p a { color: #fff; }
.local-hero-photo h1 { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.local-hero-photo h1 em,
.local-hero-photo .eyebrow { color: #ffc0e0; }
.local-hero-photo .lead { color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, .28); }

/* D.C. already has a dedicated city hero and photo. */
.city-hero.washington-dc .city-shade {
  background: linear-gradient(90deg,
    rgba(17, 17, 17, .66) 0%,
    rgba(17, 17, 17, .44) 48%,
    rgba(17, 17, 17, .16) 100%);
}

@media (max-width: 650px) {
  .local-hero-photo { min-height: 540px; }
  .local-hero-photo::before {
    background: linear-gradient(90deg,
      rgba(18, 15, 17, .62) 0%,
      rgba(18, 15, 17, .36) 100%);
  }
  .local-hero-photo > .container { padding: 60px 25px 105px; }
  .local-hero-scene > p { right: 15px; bottom: 12px; max-width: calc(100% - 30px); font-size: 10px; }
}