.field__label {
  font-weight: bold;
}

/* Стандартное инлайновое поле на мобилках выстраиваем вертикально */
.field--label-inline {
  display: flex;
  flex-direction: column; /* Элементы идут строго друг под другом */
  gap: 0.2rem; /* Небольшой отступ между названием и значением */
  padding-bottom: 1rem; /* Безопасный отступ снизу от всего поля */
}

/* Сбрасываем старые отступы дефолтного Drupal, задаем чистые */
.field--label-inline .field__label,
.field--label-inline > .field__item,
.field--label-inline .field__items {
  padding: 0;
}

/* Двоеточие после названия поля добавляем на всех экранах */
.field--label-inline .field__label::after {
  content: ":";
}

/* ==========================================================================
   АДАПТИВ: ДЛЯ ПЛАНШЕТОВ И ПК (Экран от 768px и шире)
   ========================================================================== */
@media screen and (min-width: 768px) {
  /* Возвращаем элементам привычный инлайновый вид (в одну строку) */
  .field--label-inline {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  /* Направление текста справа налево (RTL) — Drupal-специфика */
  [dir="rtl"] .field--label-inline {
    flex-direction: row-reverse;
  }
}