Pavel-ww

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

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

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

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

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

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

Учу Bootstrap

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

.child {
	flex-basis: 100%;
}

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

Только начали с гридами знакомиться? Нет ничего плохого в использовании media. Пользуйтесь этим, единственное что, нет смысла задавать диапазон. Если ваш подход desktop first используйте max-width и всё.

@media (max-width: 1199px) {
	/* Код для экранов уже 1200px */
}
@media (max-width: 991px) {
	/* Код для экранов уже 992px */
}
@media (max-width: 768px) {
	/* Код для экранов уже 767px */
}
@media (max-width: 576px) {
	/* Код для экранов уже 575px */
}

По моему субъективному мнению grid-area стоит использовать только для лайоута всего сайта/страницы - распределить с помощью этого header, sidebar, main, footer. В контексте отдельного блока, особенно такого как у вас это не удобно и не гибко.

Вместо этого используйте grid-column, grid-row для того чтобы задать положение блоков в нужных ячейках.
И grid-template-columns конфликтует с grid-area. Вы уменьшаете количество колонок, но grid-area создает их все так же 4 помещая последнюю в область не явной сетки.
То есть на ширине меньше 1024px у вас должно быть 3 колонки судя по этому grid-template-columns: 0.5fr 0.4fr 0.4fr; а по факту их 4.

Конечно зависит от контекста проекта, но в общем container не должен быть grid так как обычно он используется для ограничения контентной области всей страницы или он может быть grid но не для этого блока, а для всего контента, с другими параметрами. Обычно контейнеру задают какую то max-width разную в разных точках остановки и margin: 0 auto для центрирования. И это можно так же заменить на grid.
Например grid-template-columns: minmax(0, 1fr) minmax(0, 1200px) minmax(0, 1fr); что сделает тоже самое но гридом.

То есть правильным было бы внутрь контейнера поместить родительский grid блок со всеми айтемами. А у контейнера совершенно другая задача.

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

В целом вообще всё не правильно. Зачем скрывать один 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.

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

Скриншота не видно, но тут можно и без него подсказать - отцентрируйте в фотошопе, или предоставьте код в песочнице. Иначе шансы получить ответ близки к 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;.

Надо очистить всё у ul а не только list-style, надо убрать display block у li > a, для li display inline, а не inline-block.

Или вместо всех этих inline для li просто воспользоваться современными технологиями

.mnu_top {
	display: flex;
	gap: 0 75px;
}

Или вот так, что будет надежнее для старых IOS

.mnu_top {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min-content;
	grid-gap: 0 75px;
}

И еще с body разобраться. Вы все это пытаетесь делать при ширине body 320px. Это же всё не помещается внутрь body.
В целом, не грамотная верстка. Надо использовать контейнер, а не задавать ширину body.

И совет - вендорные префиксы добавляйте в самом конце, когда верстка уже готова и отлажена. Для этого есть post css плагины для редакторов кода