.locationSection {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  min-height: 720px;
  background: var(--white);
}

.locationInfo {
  padding: 8rem 6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.locationInfo .sectionIndex { margin-bottom: 3.5rem; }

.locationInfo h2 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(3.5rem, 5.6vw, 6.6rem);
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.locationInfo h2 span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--black);
}

.locationLead {
  max-width: 470px;
  margin: 2.5rem 0 3rem;
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
}

.locationData { margin: 0 0 2.8rem; }
.locationData > div { display: grid; grid-template-columns: 100px 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid #bdbdb8; }
.locationData dt { color: #777; font-size: .63rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.locationData dd { margin: 0; font-size: .86rem; font-weight: 700; line-height: 1.55; }
.mapButton { width: max-content; padding: 16px 19px; border: 1px solid var(--black); font-size: .72rem; font-weight: 800; transition: .25s; }
.mapButton span { color: var(--red); margin-left: 12px; }
.mapButton:hover { background: var(--black); color: #fff; }
.mapFrame { position: relative; min-height: 620px; background: #d4d4cf; overflow: hidden; }
.mapFrame iframe { display: block; width: 100%; height: 100%; min-height: 620px; border: 0; filter: grayscale(1) contrast(1.08); transition: filter .35s; }
.mapFrame:hover iframe { filter: grayscale(.2) contrast(1.03); }
.mapLabel { position: absolute; left: 28px; bottom: 28px; display: flex; flex-direction: column; padding: 14px 17px; background: var(--red); color: #fff; pointer-events: none; transform: rotate(-2deg); }
.mapLabel b { font-family: "Archivo Black", sans-serif; font-size: 1rem; }
.mapLabel span { margin-top: 3px; font-size: .53rem; letter-spacing: .17em; }

@media (max-width: 900px) {
  .locationSection { grid-template-columns: 1fr; min-height: 0; }
  .locationInfo { padding: 6rem 24px; }
  .locationInfo h2 { font-size: clamp(3.4rem, 14vw, 6rem); }
  .mapFrame, .mapFrame iframe { min-height: 520px; }
}

@media (max-width: 520px) {
  .locationInfo { padding: 5rem 20px; }
  .locationInfo h2 { font-size: 3.5rem; }
  .locationData > div { grid-template-columns: 82px 1fr; }
  .mapButton { width: 100%; text-align: center; }
  .mapFrame, .mapFrame iframe { min-height: 420px; }
}