Делаем 3D-книгу адаптивной

Я делал 3D-книгу с помощью CSS, основанного на этот пример, и мне было трудно сделать ее отзывчивой. Высота - самая большая проблема. Я пробовал следующее:

а) сделать ширину 100% и использовать vh для высоты, но это не очень хорошо

б) используя этот пример jQuery, который

window.addEventListener("resize", function(e) {
    var mapElement = document.getElementById("map");
    mapElement.style.height = mapElement.offsetWidth * 1.72;
});

но поскольку у меня есть несколько div с заданной высотой, не похоже, что он работает

c) использование padding-bottom с процентами, но хотя это казалось хорошей идеей, я не мог заставить эту работу всю жизнь, потому что мне пришлось бы установить padding-bottom для нескольких div:

.bk-left, .bk-back, .bk-front, .bk-cover {
  /* and they also can't be the same padding-bottom 
  because it doesn't seem to work like that */
}

Но ничего из этого не сработало. Либо я неправильно их использовал, либо я могу еще кое-что сделать. Вот кодовый ключ с моей 3D-книгой, как сейчас. Я использую Bootstrap 4, но только для сетки, поэтому я не собираюсь внедрять решения Bootstrap в настоящую книгу. Но может ли кто-нибудь взглянуть и сообщить мне, как я могу это сделать? Я открыт для подходов как CSS, так и JS / jQuery, если он правильно масштабируется. Огромное спасибо!