alpprom63, понадеялась на ваш разум и умение делать ctrl+c ctrl+v. Но видимо, да и это оказалось слишком заумным. Приношу извинения.
Уточняю: добавьте атрибут href самостоятельно.
Про 100vh сказали. Только не забудьте про волшебные хаки, чтобы он работал как вам понравится.
А главное, подумайте, а лучше нарисуйте, как будет вписываться контент при разных размерах. Иногда это бывает просто, а иногда не очень, в зависимости от этого самого контента.
Михаил, можно определять что это мобилки и показывать (гуглится).
Можно использовать @mediaпри котором показывать специальное созданное меню.
Можно использовать @mediaпри котором перестраивать основное меню и показывать его прибитым к низу окна (position fixed|sticky).
sharp97, когда вы пишете комментарий без упоминаний, об этом никто не знает.
но потом подумал что может как-то без псевдоэлементов обойтись, чтобы gap задал и они(блоки внутри контйенера с учётом gap) сами как-то рассосались под 100% ширину контейнера
npm это менеджер пакетов и судя по всему с ним у вас проблем нет.
А вот зависимости проекта не устанавливаются.
Потому что Node.js 18 версии, а вы пытаетесь вживить туда устаревший node-sass.
id не могут дублироваться в рамках одной страницы.
И это не контентные линии, так что используйте псевдоэлементы. transform: rotate(180deg); - боюсь спросить это зачем?
1. Рисуете линию градиентом по центру. Элементам задаете паддинги и фон.
2. Задаете линии псевдоэлементами для каждого элемента и позиционируете все это флексами или гридами. Между элементами не делаете отступов. Большой блок тоже флексами.
Уточняю: добавьте атрибут href самостоятельно.