Сергей delphinpro

https://codepen.io/delphinpro/pen/mdOedZO

Как сжать квадратный блок?
https://jsfiddle.net/DelphinPRO/od427uqr/
Здесь детальнее об этом методе https://css-tricks.com/aspect-ratio-boxes/

Скоро (?) будет доступно новое свойство aspect-ratio.
Но пока его еще нет.

Зато вы можете задать display flex для tr и display:block для остальных табличных тегов и добиться требуемого отображения.

Я так понимаю, это у вас inline-block элементы
Выравнивание по умолчанию для текстовых элементов идет по базовой линии. Есть текст — выравнивается по базовым линиям текста. Нет текста — за базовую линию пустого блока считается его нижняя граница.
Как-то так.

У вас шапка не помещается, разве не видите?
Переделывайте ее раскладу по другому на маленьких экранах.

В целом верстка вроде норм. хотя я сильно не вникал.
Но по организации кода претензий вагон.
Я приведу лишь один пример (но там их полно)

Есть блок .b-logo
И все стили для него задаются через
header .b-logo {}
Накуя?!!

Этот блок больше нигде не встречается. Верстальщик, зачем ты увеличиваешь без надобности специфичность селектора??? (Может потому что не в курсе что такое вообще специфичность...)

Имена классов где-то слишком общие (.block, .desc, .bottom), где-то слишком сокращенные ('.p-row). Имя класса должно отражать назначение блока. Посмотрел на класс и примерно представляешь что он собой представляет и для чего и где используется.

Я бы такую верстку не принял. Но у меня очень жесткие требования.

UPD
Посмотрел чуть дальше

.lvl3 .bs-ipos .block .p-row {}

ну это вообще мрак...

<div class="layout">

  <div class="layout__row header">
    <div class="header__cell">
      Пусть это HEADER
    </div>
  </div>

  <div class="layout__row navbar">
    <div class="navbar__cell">
      А это пусть NAVBAR
    </div>
  </div>

  <!-- variant 1 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__col layout__col_main">
        main
      </main>
      <aside class="layout__col layout__col_side">
        side
      </aside>
    </div>
  </div>

  <!-- variant 2 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__main">
        main
      </main>
      <aside class="layout__side">
        side
      </aside>
    </div>
  </div>

  <div class="layout__row footer">
    <div class="footer__cell">
      Это FOOTER
    </div>
  </div>

</div>

Используйте padding