/* ==========================================================================
   Послуги — каталог
   ========================================================================== */

.page-hero {
  /* 140 шапка + 24 відступ */
  padding: 164rem 0 96rem;
}

.page-hero__content {
  display: flex;
  flex-direction: column;
  gap: 40rem;
  margin-top: 24rem;
}

/* Зняте з макета: картинка 200, просвіт до плашки 10, плашка 80 — картка 290.
   Наступний ряд починається через 20, а не через 40. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 400rem);
  gap: 20rem;
}

/* ========================================================== мобільна версія */
@media (max-width: 479px) {
  /* у мобільному макеті крихт на каталозі немає — одразу заголовок */
  .breadcrumbs {
    display: none;
  }

  .page-hero {
    padding: 60rem 0;
  }

  .page-hero .container {
    padding-inline: 16rem;
  }

  .page-hero__content {
    margin-top: 0;
    gap: 40rem;
  }

  /* У мобільному макеті картки стоять щільно: 10 між ними, стільки ж,
     скільки між картинкою і плашкою всередині картки. */
  .service-grid {
    grid-template-columns: 1fr;
    gap: 10rem;
  }
}