/* Reference pages (builder C): what the template's CSS does not cover. */

/* ---------- Before/after sliders side by side ----------
   A project with several before/after pairs and only one text for them: the rest stand in a
   row of 4:5 frames, like the image pairs, with a short caption in Space Mono under each. One
   under the other on phones. */
.nd_page .nd_ref_c_before_after_row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.nd_page .nd_ref_c_before_after_row.nd_ref_c_three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nd_page .nd_ref_c_before_after_row figure {
    margin: 0;
}
.nd_page .nd_ref_c_before_after_row figcaption {
    margin-top: 8px;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    line-height: 18px;
    text-transform: uppercase;
    color: var(--nd_gray_text);
}
.nd_page .nd_image_pair_section + .nd_ref_c_before_after_section,
.nd_page .nd_project_gallery_section + .nd_ref_c_before_after_section,
.nd_page .nd_ref_c_before_after_section + .nd_image_pair_section,
.nd_page .nd_ref_c_before_after_section + .nd_project_gallery_section {
    margin-top: 12px;
}
@media (max-width: 767px) {
    .nd_page .nd_ref_c_before_after_row,
    .nd_page .nd_ref_c_before_after_row.nd_ref_c_three {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* ---------- A picture whose subject sits at the top ----------
   The 4:5 frames cut a 2:3 photo at the top and bottom; a photo with a person's head near its
   top edge keeps the top. */
.nd_page img.nd_ref_c_keep_top {
    object-position: 50% 0;
}

/* ---------- Two customer quotes side by side ---------- */
.nd_page .nd_ref_c_quote_pair {
    align-items: stretch;
}