egowka

Некоторые элементы просто не сделать без абсолютного позиционирования. Его нужно использовать с умом, точечно. Не нужно делать на нём всю вёрстку. Это крутой инструмент тем, что он "вырывает" элемент из основного потока.

Возможно потому, что ты ставишь условие таким образом, что всё время добавляешь padding. Попробуй добавлять только один раз в нужный момент времени.

if (window.scrollY >= 200 && !this.scrollImage) {
        document.querySelector('.header').style.backgroundColor = 'red'
        document.querySelector('.header').style.padding = '.5rem 1.875rem'
        this.scrollImage = true
      } else if (window.scrollY < 200 && this.scrollImage) {
        document.querySelector('.header').style.padding = '1.25rem 1.875rem'
        this.scrollImage = false
      }

Мне нравится вот этот сайт. Макеты в формате фигма.
https://figma.info/blog/templates/

Необходимо сделать контейнер (родитель) для iframe поставить для него позиционирование (relative, absolute) и уже именно ему задавать z-index.

У картинок должен быть одинаковый родительский блок. Для этого блока задай одинаковую высоту самой большой картинки.