Антон Шаманов

Сами по себе слоты не имеют (почему?) такого свойства, как видимость в DOM

ну как бэ потому что это слоты, в них просто подставляется контент.
Почитай https://developer.mozilla.org/en-US/docs/Web/API/W... для общего понимания

https://www.cssscript.com/masonry-gallery-layout/ ну или какой-то аналогичный скрипт галереи.

вот тебе пример кастомного элемента https://codepen.io/WinterSilence/pen/VwmVobN можешь сделать на его основе

можешь попробовать мой вариант с переключением модалок https://getbootstrap.com/docs/5.2/components/modal...

Для начала освой какую-нибудь IDE или редактор с linter'ом(т.е. проверкой синтаксиса), в крайнем случае валидатором пользуйся
На будущее:
1. шрифты нужно подключать ДО того как начинаешь их использовать (в данном случае до CSS)
2. script'ы идут либо в header либо в конце body

да, в современных браузерах есть трассировщики/отладчики выполнения, гугли в эту сторону

используй wget, для примера команда создающая зеркало сайта https://api.jquery.com

wget --quiet --mirror --convert-links --no-host-directories --no-parent --recursive --level=5 --execute robots=off --reject xml,json --base=https://api.jquery.com/ --directory-prefix=pages

https://getbootstrap.com/docs/5.2/content/images/#... + https://getbootstrap.com/docs/5.2/utilities/flex/

1. исправить ошибки в html - https://validator.w3.org/nu/?doc=https%3A%2F%2Fodn...
+ вывод изображений:

<picture class="img-wrapper">
    <source srcset="https://www.gstatic.com/webp/gallery2/5.webp" type="image/webp">
    <img src="https://www.gstatic.com/webp/gallery2/5.png" alt="example" class="img-responsive">
  </picture>

2. оптимизировать css с помощью purgecss и critical
3. отключить/удалить отладочные скрипты вроде *_debug_wp.js
4. по возможности перенести js/css в файлы чтобы браузер мог их кешировать
5. Lazy loading

адаптивность подразумевает то, что верстка должна быть рассчитана скорее на определенный диапазон разрешений, а не на "все в одном", поэтому оптимальный вариант - сверстать отдельную версию для мобильных устройств т.е. под разрешения менее 700-800px. это займет меньше времени в плане разработки/тестирования и позволит ускорить загрузку сайта т.к. ассеты будут разделены

"вся" анимация - это краны и машины едущие по "рельсам"? по сравнению с тем, что народ выкладывает на codepen - это дет.сад

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

не верная структура navbar: он должен оборачивать container, а не наоборот. смотри примеры в доках.

это не бустрап, а то что-то когда-то им было. не изобретай велосипед, там уже все есть.

https://impuls-web.ru/kak-zadat-gradient-dlya-bord...

https://jsfiddle.net не работает в России. Чисто практически: оборачиваешь меню в label и добавляешь перед меню скрытый checkbox:

.burger-menu {display: none;}
.burger-checkbox:checked + .burger-menu {display: block;}

Но семантически это такое себе решение.