CSS properties inheritance and overriding in a nested HTML structure

Text in the snippet basically explains itself what I want to achieve. I want inner divs, that do not have a bg- class, to inherit border color, but then, if color changes, deeper divs then have that color inherited. I don’t really have control over how deep nesting happens or how divs are structured and how (to which divs) color class names are assigned.

Flexbox issue – divs vertically overflow parent element

So I am doing a practice landing page for non-existent game and this is the issue I’ve encountered.
The hero-row div is overflowing its header-box container, because it itself is overflowed by its contents
header-box contains 2 rows: nav-row and hero-row. They are displayed as flex items and themselves use flex layout inside. The issue seems to be connected to padding of the image azamat-icon. Please help me wrap my head around it, because this sinks contents of hero-row lower than necessary and the header-box is larger than the screen height, despite the heigth: 100vh.