.hero h1.location-title {
  max-width: 820px;
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

.location-brand,
.location-name,
.location-surrounding {
  display: block;
}

.location-brand {
  margin-bottom: 12px;
  color: #f05a49;
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.location-name {
  color: #f4eee5;
  font-family: 'Fraunces', serif;
  font-size: clamp(46px, 6.2vw, 76px);
  font-weight: 520;
  line-height: .98;
  letter-spacing: -.045em;
  text-shadow: 0 5px 30px rgba(0, 0, 0, .66);
}

.location-surrounding {
  margin-top: 12px;
  color: #ddd3c7;
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
}

@media (max-width: 680px) {
  .hero h1.location-title {
    max-width: 100%;
    margin-top: 13px;
  }

  .location-brand {
    margin-bottom: 9px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .1em;
  }

  .location-name {
    font-size: clamp(38px, 11.5vw, 52px);
    line-height: 1;
  }

  .location-surrounding {
    margin-top: 9px;
    font-size: clamp(15px, 4.8vw, 19px);
  }
}