.directions {
  padding-top: 120px;
}

/* ——— Направления работы ——— */
.directions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 20px;
  margin-top: 40px;
}

/* Карточки встают прямо в сетку секции, фото — третьей колонкой на обе строки */
.directions__list {
  display: contents;
}

.directions__card {
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
  background: var(--bg-card);
  transition: background-color 200ms ease-out;
}

/* По макету: светлая по умолчанию, мятная при наведении — только у мыши, на тач-экранах без hover */
@media (hover: hover) {
  .directions__card:hover {
    background: var(--accent-mint);
  }
}

.directions__num {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 52px;
  color: var(--bg-dark);
  font-weight: 600;
}

.directions__num::after {
  content: '';
  width: 72px;
  height: 2px;
  background: var(--bg-dark);
}

.directions__card-title {
  color: var(--text-primary);
}

.directions__card-text {
  margin-top: 14px;
  color: var(--text-desc);
}

/* Фото уходит до правого края окна: 600px — половина рабочей ширины .container (1280 − 2×40) */
.directions__media {
  position: relative;
  grid-column: 3;
  grid-row: 1 / 3;
  margin-right: min(-40px, calc(600px - 50vw));
  mask-image:
    linear-gradient(to right, transparent, black 4%, black 96%, transparent),
    linear-gradient(to bottom, transparent, black 4%, black 96%, transparent);
  mask-composite: intersect;
}

/* absolute — чтобы высоту строк задавали карточки, а не фото */
.directions__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1080px) {
  .directions {
    padding-top: 56px;
  }

  .directions__grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 24px;
    gap: 12px;
  }

  .directions__media {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-right: 0;
    aspect-ratio: 3 / 2;
    mask-image: linear-gradient(to bottom, transparent, black 6%, black 94%, transparent);
  }
}

@media (max-width: 768px) {
  .directions__grid {
    grid-template-columns: 1fr;
  }

  .directions__num::after {
    width: 48px;
  }

  .directions__card {
    padding: 24px 20px;
  }

  .directions__num {
    margin-bottom: 20px;
  }

  .directions__card-text {
    margin-top: 8px;
  }
}