/* PROJECT 24 — EDITORIAL PROCESS LAYOUT
   Dedicated to project24.html only.
   Shared new_project.css remains unchanged.
   The six process images are cropped to a consistent 4:3 format.
*/

.project24-process {
    max-width: 800px;
}


.project24-process .project24-cover-image {
    display: block !important;
    width: 33.333% !important;
    max-width: 267px !important;
    height: auto !important;
    float: none !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
    margin: 1.5em 0 0 0 !important;
    padding: 0 !important;
}

@media (max-width: 756px) {
    .project24-process .project24-cover-image {
        width: 40% !important;
        max-width: 267px !important;
        height: auto !important;
        margin: 1.5em 0 0 0 !important;
    }
}

.project24-process .process-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.project24-process .project24-image {
    display: block !important;
    width: 100% !important;
    max-width: 800px !important;
    aspect-ratio: 4 / 3;
    height: auto !important;
    float: none !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.project24-process .process-row .project24-image {
    width: 100% !important;
    max-width: none !important;
}

/* One writing line below each 3-image row. */
.project24-process .process-caption {
    margin: 0 0 1.4rem 0;
    padding-top: 0.45rem;
    font-family: AkkuratLLEduWeb-Regular, Arial, sans-serif;
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Final result keeps its natural proportions and has one writing line below. */
.project24-process .process-final {
    margin: 0 0 1.4rem 0;
    padding: 0;
}

.project24-process .process-final .project24-image {
    aspect-ratio: auto;
    object-fit: contain !important;
}

/* Mobile: retain the same sequence, stacked one image at a time. */
@media (max-width: 756px) {
    .project24-process .process-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .project24-process .process-row .project24-image {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 4 / 3;
    }
}