.project-locations {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, rgba(197, 111, 54, .18), transparent 32%),
    linear-gradient(145deg, #111518 0%, #090b0d 100%);
}

.project-locations::before {
  content: "BUFFALO";
  position: absolute;
  right: -2vw;
  top: 20px;
  color: rgba(255, 255, 255, .025);
  font: 900 clamp(88px, 17vw, 250px)/1 Arial, sans-serif;
  letter-spacing: -.06em;
  pointer-events: none;
}

.project-locations .section-heading,
.project-location-grid,
.projects-cta { position: relative; z-index: 1; }

.project-location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.project-location-grid a {
  min-height: 168px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  color: var(--paper);
  text-decoration: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.project-location-grid a:hover,
.project-location-grid a:focus-visible {
  background: linear-gradient(135deg, rgba(197, 111, 54, .24), rgba(235, 154, 93, .06));
  box-shadow: inset 0 0 0 1px var(--copper);
  transform: translateY(-3px);
  outline: none;
}

.project-location-grid span {
  color: var(--copper-light);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .16em;
}

.project-location-grid strong {
  margin: 28px 0 10px;
  font: 700 clamp(20px, 2vw, 29px)/1.08 Georgia, serif;
  text-transform: uppercase;
}

.project-location-grid small {
  margin-top: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.projects-cta {
  display: block;
  margin-top: 36px;
  color: var(--paper);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .1em;
}

.projects-cta strong { color: var(--copper-light); }

@media (max-width: 920px) {
  .project-location-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .project-location-grid { grid-template-columns: 1fr; }
  .project-location-grid a { min-height: 138px; }
}