Михаил

Ему не с чего меняться

.button {
  top: 0;
  transition...
}

как вариант

document.addEventListener('DOMContentLoaded', () => {
  first();
  setTimeout(second, 10);
  setTimeout(third, 30);
})

https://developer.mozilla.org/en-US/docs/Web/CSS/:...

Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as img, or to br elements.

.container.left {
  /* float: left; */
}

ну или clearfix после него

flex-shrink: 0;

проблема в том, что animation задаёт все, в независимости от указанных вами параметров, так же как background, border, padding и тд

top 0

Я бы так сделал https://codepen.io/notiv/pen/gOrEBZa
Разделил бы название файла на части и левую уже резал при сужении блока

Где-то переполнение контента
Судя по скрину желтый блок

* {
  box-sizing: border-box;
}

нужно так, чтоб работало
оптимизация это уже другой вопрос

вы явно где-то потеряли вторую l
document.getElementById('chat-hello-message') вернуло null, значит на момент вызова функции, элемента ещё нет в DOm

* {
  box-sizing: border-box;
}

50vw === 50%
Эти значения никогда не будут достигнуты окном, потому что они от него и расчитываются,так что это бесполезно

https://developer.mozilla.org/en-US/docs/Web/HTML/...

сверху список-фильтр
снизу блок картинок

особого названия я не припомню
можно сделать с mixitup

Проблема в подключенных 2х версиях бутстрапа а точнее в смешивании flex/float

demo.themefisher.com/agico/homepage3.html

google > css aspect ratio
https://css-tricks.com/aspect-ratio-boxes/