Pavel-ww

Есть ли решение этой ситуации или придется делать фиксированную высоту и указывать overflow hidden?

Можно сделать и с overflow, и одинаковой высоты. Это не имеет отношения к Slick Slider. Он просто делает ваши айтемы объектами карусели. Сверстайте это на флексах или гридах, как если бы слайдер не был подключен.

И правильно ли я понимаю, что такого типа отзывы на лендингах чаще всего не являются функциональными, т.е. пользователи не могут сами оставлять отзывы, а их просто добавляют через админку?

Опять же, зависит от вас - от того как вы это сделаете и что нужно заказчику. Можно и так и этак. Но, комменты в любом случае надо модерировать. Можно установить форму для добавления комментариев, но размещать их вручную или динамически после подтверждения админом

Если изображение фоновое с размером cover, то надо делать адаптивным контейнер и текст, а не само изображение. Без ссылки на пример больше сказать нечего

у любого сайта в браузере ширина 1536 или что-то около того

никогда о таком не слышал

Учу Bootstrap

Плохо учите. Bootstrap Grid - это то с чего надо начать. Всё отлично описано в документации. В том числе и ширины контентной области в точках остановки и порядок вложенных классов для достижения этого

Можно и одинаковой ширины. Разделите на большее количество колонок с более мелким шагом, вплоть до того, что можете разлиновать как тетрадь в клетку. В общем подберите наименьший шаг, согласно вашему макету. А потом с помощью grid-column и grid-row расположите элементы как надо

Если дизайном не предполагается использовать заголовок, то вместо тега section стоит использовать div. Или таки добавить заголовок и скрыть его с помощью visually-hidden

В целом вообще всё не правильно. Зачем скрывать один Header и запуливать его транслейтом за пределы видимости и показывать другой? Это не только костыль, но и не семантично.

Если нет противопоказаний для position: sticky используйте это, без всяких скриптов.

Если требуется со скриптом и переключение позиционирования, то одному и тому же Header при прокрутке добавляете/удаляете класс sticky например. И там уже, в css пишете для sticky position fixed.

Это базовый принцип. Но при переключении позиционирования будет скачек контента из-за того что Header вылетает из потока при position fixed.
Поэтому, position fixed и всё стиливое оформление надо назначать для внутреннего блока, который должен быть размещен в Header. У самого Header должна быть настроена только высота.

Или добавлять padding-top равный высоте Header когда он получает класс sticky, для блока следующего за ним.
Эти подходы предотвратят скачек контента при скролле

Есть ужасающе костыльные способы это сделать на css html - использование чекбоксов/радио, псевдокласса target и прочая дичь. Всё это имеет только академический интерес. Описывать долго и нудно. Если погуглите - найдете.

Если нужен простой спойлер - тэг <details>

Не занимайтесь ерундой. Javascript в руки и вперед

Если убрать display: grid

Так уберите. Перейдите на flex, flex-direction: column

А по гидам:
repeat(1, auto); - странное значение. Что репититься то должно? Просто 1fr поставьте. repeat имеет смысл если больше одной колонки, для сокращения записи. И добавьте grid-auto-rows.

Вообще всегда надо давать ссылку на полноценный код в песочнице или сайт. И правила сервиса об этом же говорят

Скорее всего потому что путь не верный. Если папка img лежит в корне, удалите точку перед слэшем. Если не в корне, добавьте перед слэшем полный относительный путь начинающийся со слэша же.

Скриншота не видно, но тут можно и без него подсказать - отцентрируйте в фотошопе, или предоставьте код в песочнице. Иначе шансы получить ответ близки к 0 ;)

Что бы прям точно по центру, то так.

.wrap {
	display: flex;
	justify-content: center;
	position: relative;
}
.item:last-child {
	position: absolute;
	right: 0;
}

Все другие варианты (в контексте flexbox) будут учитывать ширину второго блока и смещать первый от центра на ее размер.
Например такой вариант

.item:first-child {
	margin: 0 auto;
}

Если ширина второго блока статична и известна, можно использовать calc в каком-то виде

Взгляните на этот фреймворк для верстки писем https://mjml.io/. Денек покурите документацию и станете асом в верстке email )).
Есть плагин для VS Code и Sublime

Ну в целом ситуация понятна - стили попапа далеко внизу css файла. Браузер читает код слева на право сверху вниз. Поэтому попап появляется до того как браузер прочтет его стили. Переместите важные стили, отвечающие за отображение в самый верх css файла. Ну и transition работает в обе стороны.
Но, вообще откуда такое решение взялось opacity: 0 и visibility: hidden? Обычно для попапа устанавливается display: none; и по клику на триггер или иному событию к нему добавляется display: block; или класс с display: block;.

С такой ( стандартной) разметкой никак. Загуглите range slider plugin, найдёте плагин. Установите и используйте для создания ползунков. Его можно стилизовать как угодно

Не понял что такое main-e, не нашел это в коде.

Отступ снизу - не настроена высота html, body 100% и дочерних элементов, поэтому высота соответствует контенту, а не растягивается по высоте экрана.

Отступ справа - у вас максимально возможная суммарная ширина всех колонок 1702px (жестко прописано в коде) поэтому остается пустое пространство на экранах шире этого размера. Запутались с комбинацией max-width и width в третьей колонке

Для этого необходимо использовать правильный html.
Конструкция должна быть не такая

<div>
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
</div>

А такая

<ul>
    <li>
        <a href="#"></a>
    </li>
    <li>
        <a href="#"></a>
    </li>
    <li>
        <a href="#"></a>
    </li>
</ul>

Всегда исследуйте примеры инспектором кода и найдете ответы.

Никак. Это же обновление страницы с применением нового кода. Не работает по другому