.process-main {
    padding-bottom: 120px;
}

.process-intro {
    margin-bottom: 78px;
}

.process-gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.process-photo {
    position: relative;
    min-height: 330px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ink);
    background: var(--mint);
}

.process-photo-wide {
    grid-column: span 7;
}

.process-photo-tall {
    grid-column: span 5;
}

.process-photo-medium {
    grid-column: span 4;
}

.process-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.process-photo:hover img {
    transform: scale(1.04);
}

.process-photo figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    background: rgba(32, 60, 53, 0.9);
    color: white;
    font-family: "Fraunces", serif;
    font-size: 1.2rem;
}

.process-photo figcaption span {
    color: var(--pollen);
    font: 0.68rem "DM Mono", monospace;
    letter-spacing: 0.08em;
}

@media (max-width: 800px) {
    .process-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-photo-wide,
    .process-photo-tall,
    .process-photo-medium {
        grid-column: span 1;
    }
}

@media (max-width: 560px) {
    .process-gallery {
        grid-template-columns: 1fr;
    }

    .process-photo-wide,
    .process-photo-tall,
    .process-photo-medium {
        grid-column: auto;
    }

    .process-photo {
        min-height: 280px;
    }
}