Первый див поверх второго, и теперь во втором элементы не кликабельны, как исправить?

Question

[Антон Вебсайтовский]

Первый див я пометил 1), это верхняя часть и слева, меню, логотип, кнопки.
Див второй, в нем элементы 2),3),4), они кликабельные, полностью как идет каждый элемент вся его область кликабельная, так у всех трех.
Первый див сделал через z-index, поверх второго, чтобы было видно элементы, все получилось и элементы в первом див кликабельные, меню, лого и т.д, но теперь во втором диве где идут элементы 2),3),4), не кликабелен.



Сделал пример:
https://codepen.io/AXOT/pen/xxNYVam

Answer 1

[Ankhena]

Сделать элемент или псевдоэлемент прозрачным для клика: pointer-events
Через это же свойство можно вернуть обратно для дочерних.

Переверстать гридами.
Например, быстренько как-то так https://jsfiddle.net/d2mnfq7o/
Разумеется, нужно дорабатывать под себя.