/* The explorer is a direct child of main and owns its width and spacing. */
main > .city-explorer {
  inline-size: min(1400px, calc(100% - clamp(24px, 7vw, 96px)));
  margin: clamp(28px, 5vw, 72px) auto 0;
  grid-template-columns: minmax(245px, .72fr) minmax(0, 1.65fr);
  grid-template-areas: "heading heading" "index map";
}
.city-intro {
  grid-area: heading;
  padding: clamp(22px, 3vw, 44px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  border-bottom: 1px solid #ffffff26;
}
.city-intro h2 {
  margin: 0;
  color: #f7f6ec;
  font: 400 clamp(30px, 4vw, 56px)/1.08 Georgia, serif;
}
.city-intro .city-filters { margin: 0; }
.city-intro button { min-height: 40px; font-size: 12px; }
.city-explorer > .city-editorial { grid-area: index; padding: clamp(20px, 3vw, 40px); }
.city-editorial h3 { margin: 0; font-size: 18px; }
.city-explorer > .city-map-side { grid-area: map; }
.city-map-side .city-map-viewport { height: clamp(340px, 35vw, 540px); }
@media (max-width: 760px) {
  main > .city-explorer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "map" "index";
  }
  .city-map-side .city-map-viewport { height: clamp(270px, 76vw, 430px); }
  .city-explorer .city-list { grid-template-columns: minmax(0, 1fr); }
  .city-map-side .city-property-preview { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
}