.suburb-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--navy);
}
.suburb-hero__picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.suburb-hero__picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.suburb-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7,21,54,.94) 0%, rgba(7,21,54,.86) 29%, rgba(7,21,54,.60) 46%, rgba(7,21,54,.13) 69%, rgba(7,21,54,.04) 100%);
}
.suburb-hero__inner {
  min-height: clamp(620px, 44vw, 790px);
  display: flex;
  flex-direction: column;
  padding-block: 1.5rem 4rem;
}
.suburb-hero__breadcrumbs {
  margin-block: 0 2.5rem;
  color: #eef3fb;
  font-size: .8rem;
}
.suburb-hero__breadcrumbs a { color: inherit; }
.suburb-hero__copy {
  margin-block: auto;
  width: min(48%, 38rem);
}
.suburb-hero h1 {
  margin: .75rem 0 1.25rem;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(3.5rem, 5.3vw, 5.75rem);
  font-weight: 400;
  line-height: 1.02;
  text-wrap: balance;
}
.suburb-hero .locality-postcode { color: #edf3ff; margin-block: 1.4rem; }
.suburb-hero__intro {
  max-width: 31rem;
  margin-block: 0 1.75rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #edf3ff;
}
.suburb-hero .button { white-space: normal; text-align: left; }
.suburb-hero a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media (min-width: 1800px) {
  .suburb-hero__picture img { object-position: center 55%; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .suburb-hero__copy { width: 56%; }
  .suburb-hero__inner { min-height: 610px; }
  .suburb-hero h1 { font-size: 3.6rem; }
}
@media (max-width: 700px) {
  .suburb-hero__picture { position: relative; inset: auto; z-index: auto; width: 100%; }
  .suburb-hero__picture img { width: 100%; height: auto; object-fit: contain; }
  .suburb-hero__shade { display: none; }
  .suburb-hero__inner { min-height: 0; padding-block: 1.2rem 2.5rem; }
  .suburb-hero__breadcrumbs { margin-bottom: 1.5rem; font-size: .72rem; }
  .suburb-hero__copy { width: 100%; margin: 0; }
  .suburb-hero h1 { font-size: clamp(2.8rem, 11vw, 4rem); }
  .suburb-hero .locality-postcode { margin-block: 1rem; font-size: .88rem; }
  .suburb-hero__intro { font-size: 1rem; margin-bottom: 1.5rem; }
}