/* ============================================
   PROCESS — фото процесса работы
   Поднимаем секцию выше (уменьшаем верхний отступ).
   ============================================ */

/* Поднимаем секцию «Процесс» выше */
.section--process {
    padding-top: var(--space-lg);   /* было 60px → стало 40px */
}

@media (max-width: 640px) {
    .section--process {
        padding-top: var(--space-md);   /* на мобильном — 20px */
    }
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-sm);
}

.work-grid img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    filter: grayscale(30%) contrast(110%);
    transition: all var(--duration-slow) var(--ease-smooth);
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.work-grid img:hover {
    filter: grayscale(0%) contrast(120%);
    border-color: var(--color-accent);
    transform: scale(1.02);
    box-shadow: var(--shadow-glow);
}

/* Если фото — чётное количество, крайние делаем крупнее */
.work-grid img:nth-child(3n+1) {
    grid-row: span 1;
}

@media (max-width: 640px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }

    .work-grid img {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .work-grid img {
        height: 180px;
    }
}