/* ==========================================================================
   Главная — примеры работ (site/layouts/140-projects.php). Только var(--es-*).
   Мозаика без пустых ячеек: раскладка зависит от количества фото (класс --N).
   ========================================================================== */
body.main-page .home-projects__grid {display: grid; grid-template-columns: repeat(var(--projects-cols, 3), minmax(0, 1fr)); grid-auto-rows: 240px; gap: 16px}
body.main-page .home-projects__grid--1 {--projects-cols: 1; grid-auto-rows: 420px}
body.main-page .home-projects__grid--2 {--projects-cols: 2; grid-auto-rows: 360px}
body.main-page .home-projects__grid--3,
body.main-page .home-projects__grid--6 {--projects-cols: 3}
body.main-page .home-projects__grid--4,
body.main-page .home-projects__grid--5 {--projects-cols: 4}
body.main-page .home-projects__grid--3 .home-projects__item:first-child,
body.main-page .home-projects__grid--4 .home-projects__item:first-child,
body.main-page .home-projects__grid--5 .home-projects__item:first-child,
body.main-page .home-projects__grid--6 .home-projects__item:first-child {grid-column: span 2; grid-row: span 2}
body.main-page .home-projects__grid--4 .home-projects__item:nth-child(4) {grid-column: span 2}

body.main-page .home-projects__item {position: relative; display: block; overflow: hidden; border-radius: var(--es-radius); background: var(--es-surface-alt)}
body.main-page .home-projects__item picture,
body.main-page .home-projects__item img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease}
body.main-page .home-projects__item:hover img {transform: scale(1.06)}
body.main-page .home-projects__overlay {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 18px; background: linear-gradient(0deg, rgba(10, 18, 25, .72) 0%, rgba(10, 18, 25, 0) 55%); opacity: 0; transition: opacity .3s}
body.main-page .home-projects__item:hover .home-projects__overlay,
body.main-page .home-projects__item:focus-visible .home-projects__overlay {opacity: 1}
body.main-page .home-projects__zoom {display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border-radius: 50%; background: #fff; color: var(--es-heading); font-size: 18px}
body.main-page .home-projects__caption {color: #fff; font-size: 16px; font-weight: 700; line-height: 1.35}

@media (max-width: 768px) {
    body.main-page .home-projects__grid {--projects-cols: 2 !important; grid-auto-rows: 180px; gap: 12px}
    body.main-page .home-projects__grid .home-projects__item {grid-column: auto !important; grid-row: auto !important}
    body.main-page .home-projects__grid .home-projects__item:first-child {grid-column: span 2 !important; grid-row: span 2 !important}
    body.main-page .home-projects__grid--2 .home-projects__item:first-child {grid-row: auto !important}
    body.main-page .home-projects__grid--4 .home-projects__item:nth-child(4),
    body.main-page .home-projects__grid--6 .home-projects__item:nth-child(6) {grid-column: span 2 !important}
    body.main-page .home-projects__overlay {opacity: 1; background: linear-gradient(0deg, rgba(10, 18, 25, .6) 0%, rgba(10, 18, 25, 0) 50%)}
    body.main-page .home-projects__zoom {display: none}
}
@media (max-width: 480px) {
    body.main-page .home-projects__grid {grid-auto-rows: 140px}
}