grid-template-areas: семантическая сетка лендинга без лишних обёрток
Именованные зоны hero, pricing и footer на одной grid-родительнице.
`grid-template-areas` задаёт карту секций строками в CSS — на мобильном меняете одну `grid-template-areas`, а не порядок DOM.
Удобно для маркетинговых страниц с повторяющимся шаблоном.
- grid-template-areas — MDN — Синтаксис имён зон.
- Grid template areas — web.dev — Адаптивные примеры.
Доступность
Порядок в DOM должен соответствовать смыслу чтения — areas не исправляют плохую разметку для screen reader.