/* Главная: услуги — фото-плитки во всю ширину (site/layouts/120-services.php) */
body.main-page .home-services__grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 4px}
body.main-page .home-services__tile {position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--es-dark); color: #fff; isolation: isolate}
body.main-page .home-services__tile--wide {grid-column: span 2; aspect-ratio: 2 / 1}
body.main-page .home-services__tile picture, body.main-page .home-services__tile img {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%}
body.main-page .home-services__tile img {object-fit: cover; transition: transform .6s ease}
body.main-page .home-services__tile::after {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 10, 9, .82) 0%, rgba(8, 10, 9, .25) 45%, rgba(8, 10, 9, 0) 70%)}
body.main-page .home-services__tile:hover img {transform: scale(1.05)}
body.main-page .home-services__caption {position: absolute; left: 28px; right: 80px; bottom: 26px; display: flex; flex-direction: column; gap: 4px}
body.main-page .home-services__name {font-family: var(--es-font-head); font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; line-height: 1.1}
body.main-page .home-services__sub {color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.4}
body.main-page .home-services__arrow {position: absolute; right: 26px; bottom: 28px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--es-primary); color: var(--es-on-primary); transition: transform .2s}
body.main-page .home-services__arrow::before {content: "\2192"; font-size: 20px; font-weight: 700; line-height: 1}
body.main-page .home-services__tile:hover .home-services__arrow {transform: translateX(4px)}
@media (max-width: 992px) {
    body.main-page .home-services__grid {grid-template-columns: repeat(2, 1fr)}
    body.main-page .home-services__tile {aspect-ratio: 4 / 3}
    body.main-page .home-services__tile--wide {grid-column: span 1; aspect-ratio: 4 / 3}
}
@media (max-width: 600px) {
    body.main-page .home-services__grid {grid-template-columns: 1fr 1fr; gap: 3px; padding: 0}
    body.main-page .home-services__tile, body.main-page .home-services__tile--wide {aspect-ratio: 3 / 4}
    body.main-page .home-services__tile--wide {grid-column: span 2; aspect-ratio: 16 / 9}
    body.main-page .home-services__caption {left: 14px; right: 14px; bottom: 14px}
    body.main-page .home-services__name {font-size: 19px}
    body.main-page .home-services__sub {font-size: 13px}
    body.main-page .home-services__arrow {display: none}
}
@media (prefers-reduced-motion: reduce) {
    body.main-page .home-services__tile img {transition: none}
}
body.main-page .home-services {padding-bottom: 4px}