/* Project page rows: one photo beside a short block of Will's copy.
   With items-center and a fixed aspect ratio the photo ran up to 276px taller
   than its text, which read as a hole in the page.

   The photo must NOT contribute to the row height, or it decides it: giving the
   img height:100% inside a stretch item is circular (the parent has no definite
   height), so portrait sources fall back to their natural height and the row
   blew out to 1052px. Taking the img out of flow with position:absolute fixes
   that — the row is then max(copy, 380px) and the photo simply fills it.

   Below lg the columns stack and the photo keeps the 4/3 ratio set inline. */
@media (min-width: 1024px) {
  .reno-row { align-items: stretch; }

  .reno-row > div:not(.reno-shot) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 380px;          /* the copy column sets the row height */
  }

  .reno-shot { position: relative; }

  .reno-shot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto !important;   /* beats the inline 4/3; object-position survives */
  }
}