/* Project photographs alongside the home introduction and planning guides. */
.project-mosaic,
.project-photo-pair {
  display: grid;
  gap: 8px;
}
.project-mosaic {
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: clamp(250px, 26vw, 365px);
}
.project-mosaic > :first-child { grid-row: span 2; }
.project-photo-tile {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: 15px;
  background: #deedf1;
}
.project-photo-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-photo-tile:focus-visible {
  outline: 3px solid var(--brand-blue-ink);
  outline-offset: 2px;
}
.project-photo-tile span {
  position: absolute;
  inset: auto 0 0;
  padding: 30px 12px 10px;
  color: #fff;
  background: linear-gradient(transparent, rgba(5,31,43,.84));
  font: 550 13px/1.25 var(--site-font);
}
.project-photo-tile:hover span { text-decoration: underline; text-underline-offset: 3px; }
.project-photo-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-photo-pair .project-photo-tile { aspect-ratio: 1.6; }
.about-page .ab-story-media:has(.project-photo-pair) { background: transparent; overflow: visible; }
.about-page .ab-story-media:has(.project-photo-pair) #ab-story-photo {
  display: block; width: 100%; height: clamp(165px, 17vw, 250px); object-fit: cover; border-radius: 16px;
}
.about-page .ab-story-media .project-photo-pair { margin-top: 8px; }
.about-page .ab-story-media .project-photo-pair .project-photo-tile { aspect-ratio: 2.1; }
.about-page .ab-story-media .project-photo-pair img { height: 100%; max-height: none; aspect-ratio: auto; }
.pg-article-body .project-photo-pair { margin-block: 28px; }
.pg-service-group .project-photo-pair { margin-block: 16px 24px; }
.pg-service-group .project-photo-pair .project-photo-tile { height: clamp(100px,12vw,160px); aspect-ratio: auto; }
.review-project-card .project-album-link { color: var(--brand-blue-ink); font-size: var(--site-body-size); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) {
  .project-mosaic { height: 205px; }
  .project-photo-tile { border-radius: 12px; }
  .project-photo-tile span { padding: 23px 8px 8px; font-size: 12px; }
  .pg-article-body .project-photo-pair { margin-block: 18px; }
  .project-photo-pair .project-photo-tile { aspect-ratio: 1.22; }
}