:where(.card, .section, .block) h2 {
  margin-block: 0.5em 1em;
}

.hero h2 {
  margin-block: 2em 1em;
}

.card :where(h2, h3, p) {
  margin-block: 0.7em;
}

const field = document.querySelector('#search');

field.addEventListener('input', (e) => {
  if (e.inputType === 'insertText') {
    console.log('Пользователь печатает текст');
  }
});

field.addEventListener('input', (e) => {
  if (e.inputType.includes('delete')) {
    console.log('Пользователь удаляет текст');
  }
});

field.addEventListener('input', (e) => {
  if (e.inputType === 'insertFromPaste') {
    console.log('Вставка текста из буфера обмена');
  }
});

field.addEventListener('input', (e) => {
  if (e.inputType.startsWith('insert') &&
      e.inputType !== 'insertText' &&
      e.inputType !== 'insertFromPaste') {
    console.log('Автозамена или другое вставочное действие');
  }
});

• normal — отключает альтернативное начертание;

• ordinal — добавляет дополнительные глифы для порядковых числительных;

• slashed-zero — ноль будет с чертой внутри;

• lining-nums — каждая цифра лежит на базовой линии текста;

• oldstyle-nums — набор строчных цифр, в котором 3, 4, 7, 9 свешиваются с базовой линии;

• proportional-nums — допустима разная ширина цифр;

• tabular-nums — одинаковая ширина каждой цифры;

• diagonal-fractions — числитель и знаменатель в дроби уменьшены и разделены косой чертой;

• stacked-fractions — числитель и знаменатель в дроби уменьшены и разделены горизонтальной линией.

.inner {
  display: grid;
  grid-template-columns: subgrid;
}

.inner {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.noscript {
  grid-column: span 2;
}