/* =============================================
   УСЛУГИ
   ============================================= */

.services { padding: 100px 0 0; }

.services__head { max-width: 640px; margin-bottom: 60px; }
.services__title { margin-bottom: 20px; }
.services__description { color: var(--graphite); }

.services__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.services__card {
  position: relative;
  background: var(--white);
  border-radius: 22px;
  border-top: 2px solid var(--deep-navy);
  padding: 25px 17px;
  display: grid;
  grid-template-rows: 1fr auto;
}
.services__card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 8%;
  width: 70px;
  height: 2px;
  background: var(--soft-sand);
}
.services__card:nth-child(3n - 1)::before {
  left: 25%;
}
.services__card:nth-child(3n)::before {
  left: 55%;
}

.services__card-head { height: 100%; margin-bottom: 20px; }
.services__card-title { margin-bottom: auto; }

.services__card-body {  display: flex; flex-direction: column; gap: 36px; }
.services__card-description { color: var(--graphite); }

.services__tags { display: flex; flex-wrap: wrap; gap: 20px; }
.services__tag {
  padding: 7.5px 16px;
  border-radius: 4px;
  background: var(--warm-ivory);
  border: 1px solid var(--deep-navy);
  color: var(--deep-navy);
}

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

@media (max-width: 768px) {
  .services { padding: 60px 0 0; }
  .services__title { margin-bottom: 10px; }
  .services__head {
    margin-bottom: 40px;
  }
  .services__card {
    padding: 10px;
  }
  .services__card-head {
    margin-bottom: 10px;
  }

  .services__card-body {
    gap: 20px;
  }

  .services__tags {
    gap: 10px;
  }

  .services__tag {
    padding: 8.5px 10px;
  }
}