/* Base-карточка UI-кита (Figma «Base», ширина 277, радиус 24, рамка rgba(0,0,0,0.05)).
   Общий блок: слайд «Технология» на главной (611:3896…611:3905) и страница товара
   (611:4109…611:4118 pc, 611:4750…611:4759 mb). Под MODX — отдельный чанк.
   Высоты и порядок задаёт страница: .tech__base--N, .product__base--N.

   Внутренности переведены в поток. Раньше заголовок стоял на top 28, текст на top 76:
   заголовок в две строки кончался на 87 и наезжал на текст — это воспроизводилось на
   странице товара (карточка «Чистота») ещё до правки. */
.base {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 277px;
  padding: 28px 23px 12px;
  border: 1px solid var(--black-05);
  border-radius: var(--r-base);
  overflow: hidden;
}

/* Заголовок: Rubik Bold 16px, ширина колонки 203 (уже padding, как в макете) */
.base__title {
  width: 203px;
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: var(--black);
}

/* Текст: Rubik Regular 12px/18, ширина 194.
   Зазор до заголовка в макете разный у разных карточек (9…28), поэтому базовое
   значение — 9, а расхождения задаёт страница. Это зазор, а не координата:
   удлинение заголовка отодвигает текст. */
.base__text {
  width: 194px;
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--black);
}