@charset "UTF-8";
/* Сервисы: телефон и md — баннеры столбиком, xl — два в ряд с отступами 200 / 120.
   --stagger (главная): шаг 16 на телефоне и md, без своих полей сверху и снизу (их задаёт страница);
   на xl второй баннер ниже на 392; когда на экране появилось 15% секции, баннеры подъезжают вверх —
   Store на 96, Bar на 296 (прототип «Other animation»: Smart Animate 1.67 с, «Slow»). Класс --raised ставит
   и снимает JS; при «Уменьшении движения» — без перехода. Место под подъезд Bar убрано отступом −296 снизу
   (подъезд срабатывает, пока низ секции ещё под экраном, — наезда на следующую секцию не видно). */
.services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding-top: 0.5rem;
  padding-inline: 0.875rem;
}
@media (min-width: 768px) {
  .services {
    padding-inline: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .services {
    padding-inline: 1.75rem;
  }
}
@media (min-width: 1280px) {
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 12.5rem;
    padding-bottom: 7.5rem;
  }
}
.services--stagger {
  gap: 1rem;
  padding-top: 0;
}
@media (min-width: 1280px) {
  .services--stagger {
    gap: 0.5rem;
    align-items: start;
    padding-block: 0;
    margin-bottom: -18.5rem;
  }
}
@media (min-width: 1280px) {
  .services--stagger .services__item {
    transition: transform 1.67s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .services--stagger .services__item {
    transition: none;
  }
}
@media (min-width: 1280px) {
  .services--stagger .services__item:last-child {
    margin-top: 24.5rem;
  }
}
@media (min-width: 1280px) {
  .services--raised .services__item {
    transform: translateY(-6rem);
  }
}
@media (min-width: 1280px) {
  .services--raised .services__item:last-child {
    transform: translateY(-18.5rem);
  }
}