.clinic-location {
  padding: 48px 24px 52px;
  background: #0b0b0a;
  color: #f2eadb;
}
.clinic-location__inner { display: grid; max-width: 980px; margin-inline: auto; }
.clinic-location__heading { text-align: center; margin-bottom: 28px; }
.clinic-location__eyebrow { margin: 0; color: #c7a969; font-size: 10px; line-height: 1.6; letter-spacing: .19em; text-transform: uppercase; }
.clinic-location__heading h2 { margin: 12px 0 0; font: 400 clamp(35px, 9vw, 52px)/1.12 var(--sans); letter-spacing: -.04em; }
.clinic-location__photo { position: relative; width: min(100%, 382px); margin: 0 auto 28px; }
.clinic-location__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 43%; }
.clinic-location__photo::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(224 196 135 / 25%); pointer-events: none; }
.clinic-location__details { width: min(100%, 382px); margin-inline: auto; }
.clinic-location__address { display: grid; gap: 5px; color: #bcb6aa; font: normal 400 13px/1.6 var(--sans); }
.clinic-location__street { margin-bottom: 4px; color: #f2eadb; font-size: clamp(21px, 5.6vw, 28px); line-height: 1.35; letter-spacing: -.025em; }
.clinic-location__postcode { margin-top: 4px; font-size: 11px; color: #978d7c; letter-spacing: .05em; }
.clinic-location__details address { font-style: normal; }
.clinic-location__map-link { display: flex; align-items: flex-start; gap: 14px; min-height: 44px; color: inherit; text-decoration: none; }
.clinic-location__pin { flex: 0 0 24px; width: 24px; height: 28px; margin-top: 2px; stroke: #d7b879; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.clinic-location__map-link:focus-visible { outline: 2px solid #d7b879; outline-offset: 8px; }
@media (hover: hover) { .clinic-location__map-link:hover .clinic-location__street { color: #d7b879; } }
@media (min-width: 768px) {
  .clinic-location { padding: 80px 40px; }
  .clinic-location__inner { grid-template-columns: minmax(0, 382px) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: clamp(36px, 6vw, 88px); }
  .clinic-location__photo { grid-column: 1; grid-row: 1 / 3; margin: 0; align-self: center; }
  .clinic-location__heading { grid-column: 2; grid-row: 1; align-self: end; text-align: left; margin-bottom: 28px; }
  .clinic-location__details { grid-column: 2; grid-row: 2; width: 100%; max-width: none; }
}