Danila

известный баг в iOS, появляется у инпутов внутри fixed модалок
есть 2 решения:
Прятать весь контент за модалкой при открытии, так, чтобы не было скролла у страницы, при закрытии показывать снова, при этом заренее нужно сохранять позицию скролла и при закрытии модалки возвращать на место, иначе страница улетит вверх.
Не использовать position fixed

picture нужен если у тебя используются разные форматы картинок, во всех других случаях можно использовать просто img

Добавь аттрибуты muted и playsinline

<video preload="auto" muted playsinline autoplay="autoplay" loop="loop">

.header {
	/* начинаем со стилей для мобильных, на то он и mobile-first */
	
	@media (min-width: 760px) {
		/* стили для планшета */
	}
	
	@media (min-width: 1024px) {
		/* стили для десктопа */
	}
	
		
	@media (min-width: 1200px) {
		/* и дальше, если нужно */
	}
}

https://codepen.io/DNLHC/pen/YxKgzM

https://codepen.io/DNLHC/pen/aWejyE?editors=1100
вместо псевдоэлементов картинки

https://codepen.io/DNLHC/pen/RVEgMM

https://codepen.io/DNLHC/pen/RVjaQp

https://codepen.io/DNLHC/pen/KmWrJe
хотя согласно спецификации теги dd и dt оборачивать нельзя, но думаю пример ясен
переделал списком

неиспользуемый css

Design + Code my Personal Website in 12 hours
Затрагивает многие этапы веб-разработки с подробными разборами.
На русском есть аналог "WebDesign Master", но я бы не стал его рекомендовать: кастер хоть и имеет какой-то опыт разработки, но использует не лучшие практики и очень часто затрагивает вопросы в которых некомпетентен.

https://github.com/assetsjs/postcss-assets
имеет в арсенале нужную вам функциональность
вкупе с дополнительными плагинами/препроцессором можно вообще ограничиться одной строчкой кода

ctrl - alt - 0
или удалить/отключить activate-power-mode в менджере пакетов

там все элементарно, создается псевдоэлемент изначально скрытый (нулевая высота)

.btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    transition: all 0.3s;
}
.btn-1b:after {
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #fff;
}

при наведении высота псевдоэлемента увеличивается на всю кнопку

.btn-1b:hover:after, .btn-1b:active:after {
    height: 100%;
}

все это вы можете посмотреть и сами