.hero-photo {
  background-image:
    linear-gradient(0deg, rgba(11, 51, 58, .2), rgba(11, 51, 58, 0)),
    url("https://lh3.googleusercontent.com/gps-cs-s/AHRPTWm-KIPQHmJCpnyt4CewieTYEnT_p3fusr1-Udsn3NlJ02AINuOOEtMxb-adAlWFZ_nkoIxZ36xmMi2c6oaaIaFsmLV6BgpqASwNiWNLBb3GC3Emi9W5nnPjx3ewyqeDamLaekF3Qg=w1000-h1200-k-no");
  background-position: center 42%;
}

.photo-caption {
  position: absolute;
  right: 18px;
  bottom: 48px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(11, 51, 58, .82);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

@media (max-width: 720px) {
  .photo-caption {
    right: 8px;
    bottom: 43px;
    font-size: .7rem;
  }
}