/* Главная: блок «Направления работ» вместо шести плиток (22.10.2026).
   Шрифты и цвета шаблона: PT Sans, Montserrat, #56779d, рамки #aeb9c6 / #dce3eb. */
.directions { max-width: 1320px; width: 99%; margin: 0 auto 50px; }
.directions__caption { font: 400 26px/1.2em 'Montserrat', Tahoma, sans-serif; color: #56779d; text-transform: uppercase;
    letter-spacing: .12em; text-align: center; margin: 0 0 34px; }
.directions__group { margin: 0 0 30px; }
.directions__group-title { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid #dce3eb; }
.directions__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 20px; list-style: none; margin: 0; padding: 0; }
.dir-card { margin: 0; }
.dir-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f6; margin-bottom: 10px; }
.dir-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dir-card:hover .dir-card__img img { transform: scale(1.04); }
.dir-card__title { font: 500 17px/1.3em 'Fira Sans Medium', 'PT Sans', sans-serif; margin: 0; }
.dir-card__title a { color: #28201b; text-decoration: none; border-bottom: 1px solid #d2d2d2; }
.dir-card__title a:hover, .dir-card:hover .dir-card__title a { color: #549cee; border-color: #d6e7fb; }

@media (max-width: 1200px) { .directions__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 999px) {
    .directions { width: auto; padding: 0 16px; margin-bottom: 30px; }
    .directions__caption { font-size: 21px; margin-bottom: 24px; }
    .directions__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
}
@media (max-width: 560px) {
    .directions__caption { font-size: 18px; letter-spacing: .08em; }
    .directions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    .dir-card__title { font-size: 15px; }
}
/* без переносов по слогам: на узких телефонах «Кондиционирование», «металлоконструкций» помещаются за счёт кегля */
@media (max-width: 380px) { .dir-card__title { font-size: 14px; } .directions__list { gap: 18px 10px; } }
@media (max-width: 340px) { .directions__list { grid-template-columns: 1fr; } .dir-card__title { font-size: 16px; } }