Управляй отступами компонентов легко!

Если один и тот же компонент в разных блоках требует разные отступы, можно использовать :where():
:where(.card, .section, .block) h2 {
margin-block: 0.5em 1em;
}

:where() не повышает специфичность, поэтому можно переопределять стиль дальше, без !important.

Теперь можно задавать глобальные отступы для семантики, а локальные спокойно перебивать:
.hero h2 {
margin-block: 2em 1em;
}

А чтобы ограничить стили только внутри компонента, объединим :where() с контейнером:
.card :where(h2, h3, p) {
margin-block: 0.7em;
}

Теперь любой текст внутри .card получает аккуратные отступы.

Code Ready | #совет