selection - новый тег?
А вообще загрузку всех ресурсов можно посмотреть в dev tools во вкладке network (сеть). Там и увидите, по какому пути браузер пытается загрузить изображение.
Но в вашем случае сначала тег правильный сделайте.
И правильный порядок уровней заголовков соблюдайте. Текст капслоком писать не нужно — это делается через css.
Overlord934, Избавляетесь от процентов в gap и padding. Для строк устанавливаете grid-auto-rows: 1fr;. Получаются равные по высоте строки. https://codepen.io/xdevelx/pen/NWoMGLp
Для gap, padding, margin забудьте про проценты.
Когда указываете padding в процентах, понимаете, что эти самые проценты будут расчитываться от ширины родительского блока?
И указывая grid-template-rows, сами же ограничиваете их по высоте.
szQocks, Кто то из нас вообще не понял вопроса. Догадайтесь кто? Автор вопроса приложил изображение с нужной последовательностью вывода элементов в сетке.
На дестктопе это вертикальные вкладки (vertical tabs), на мобильном разрешении уже аккордеон. У них структура разметки разная. Можно изначально сверстать табы и добавить скрытые кнопки для аккордеона. Скриптом менять видимость триггеров для разных разрешений. Если загуглить tabs to accordion, то выдаст возможные варианты решения.
Может потому что у него position: absolute;? И его положение определяет margin-top: 50%;. margin в процентах рассчитывается от ширины родителя — в данном случае от ширины body. Какой в этом сакральный смысл?
