.site-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #dfe7e2;
  box-shadow: var(--shadow);
}

.site-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.site-photo--hero {
  min-height: 500px;
  aspect-ratio: 4 / 3;
}

.site-photo--hero img {
  object-position: center 58%;
}

#touring .section-heading {
  grid-template-columns: minmax(0, 0.76fr) minmax(390px, 1.24fr);
  grid-template-areas:
    "title photo"
    "copy photo";
  gap: 28px 64px;
  align-items: center;
}

#touring .section-heading > div {
  grid-area: title;
  align-self: end;
}

#touring .section-heading > p {
  grid-area: copy;
  align-self: start;
}

.site-photo--touring {
  grid-area: photo;
  min-height: 440px;
  aspect-ratio: 4 / 3;
}

.site-photo--touring img {
  object-position: center 63%;
}

.site-photo--park {
  min-height: 460px;
  aspect-ratio: 4 / 3;
}

.site-photo--park img {
  object-position: center 58%;
}

@media (max-width: 860px) {
  #touring .section-heading {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "copy"
      "photo";
    gap: 26px;
  }

  .site-photo--hero,
  .site-photo--touring,
  .site-photo--park {
    width: 100%;
    min-height: 320px;
  }
}

@media (max-width: 620px) {
  .site-photo--hero,
  .site-photo--touring,
  .site-photo--park {
    min-height: 260px;
  }
}