.loc-cards.overlap {
  margin-top: -58px;
  padding-top: 0;
  background: transparent;
  position: relative;
  z-index: 5;
}

@media (max-width: 1100px) {
  .loc-cards.overlap { margin-top: -34px; }
}
@media (max-width: 620px) {
  .loc-cards.overlap { margin-top: -26px; }
}

.loc-cards.overlap .loc-card {
  box-shadow: var(--shadow-float);
}
.loc-cards.overlap .loc-card:hover {
  box-shadow: 0 34px 74px rgba(27,31,34,.22), 0 10px 24px rgba(27,31,34,.12);
}

.loc-cards.overlap::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, rgba(253,241,233,0) 0%, #fdf1e9 55%, var(--surface-warm) 100%);
  z-index: -1; pointer-events: none;
}

.hero .hero-body { padding-bottom: clamp(84px, 10vw, 132px); }

.loc-cards.overlap { margin-top: -104px; }
@media (max-width: 1100px) { .loc-cards.overlap { margin-top: -76px; } }
@media (max-width: 620px)  { .loc-cards.overlap { margin-top: -56px; } }

.hero .hero-body { padding-bottom: clamp(120px, 13vw, 186px); }

@media (max-width: 640px) {
  .loc-cards.overlap { margin-top: 0; }
  .hero.hero-photo-fade .hero-body { padding-bottom: 146px; }
}

@media (max-aspect-ratio: 6/5) {
  .loc-cards.overlap { margin-top: 0; }
}