Липкий заголовок и якорные ссылки

После перехода к разделу его заголовок оказывается под закреплённой шапкой. Можно оставить запас прокрутки у самих якорных элементов.

.article h2[id] { scroll-margin-top: 96px; }

Значение включает высоту шапки и небольшой промежуток. При разных шапках на телефоне и компьютере задайте отступ в соответствующих media queries. Это не меняет обычные расстояния между блоками. Проверьте прямое открытие адреса с #fragment и переход с клавиатуры; учитывайте позднюю загрузку изображений выше цели.