Никита Наумов

сделайте проще:

для .albums display: inline-block; vetrical-align:top;

и все проблемы решатся

проще всего разделить на 2 части - текст отдельно, фон отдельно . фону заверстать background-size:cover , а текст как есть. вроде все должно более менее смотреться

.bg можно задать
background-size: cover;

если надо, чтобы фон всегда был "на месте", то используйте

background: url(путь_к_изображению) center fixed;

если из простого решения

<div class="container">
    <div class="column">Картинка</div>
    <div class="column">Текст</div>
</div>

.container {
  display: table;
}
.column {
  display: table-cell;
}

мне кажется, что в примере не проставлены доп. переменные -webkit и -moz

-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

ну обычно вроде все:

div {
background: url(картинка) center no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
}

Можно сделать мобильную версию на том же домене (безо всяких m.site.com) - генерить разные версии на сервере и отдавать нужную по user-agent

как-то так
<meta name="theme-color" content="#e53935">

пробовал, но половина отказалась работать, тк скрипт динамически подставляет значения и тд