Sergey

<div id="content" class="maga-site-content container">
  <div id="maga-module-0" class="maga-module module-type-posts  maga-module-layout-combo">
    <div class="row maga-posts ">
      <div class="col-lg-3 col-md-6 col-sm-12 layout-combo"> ... </div>
      <div class="col-lg-3 col-md-6 col-sm-12 layout-combo"> ... </div>
      <div class="col-lg-3 col-md-6 col-sm-12 layout-combo"> ... </div>
      <div class="col-lg-3 col-md-6 col-sm-12 layout-combo"> ... </div>

Посмотрите swiper, немного дополнить css и, думаю, можно получить то что вам необходимо

Вот пример https://codepen.io/amassing/pen/vrOzWa

calendar-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

Можно вот так:

.navbar-nav .nav-link:first-child {
    color: red;
}

Добавить br надо, например

<div>
    <p>“Чайная коллекция” безалкогольный негазированный напиток,<br> “Зеленый чай с ароматом лимона” пастеризованный,075л</p>
</div>

Можно добавить ко всем классам префикс с названием плагина/виджета

В .thumbs:before надо убрать прозрачность - изменить opacity с 0 на 1

Можно с помощью matthewhudson.me/projects/device.js

Есть еще хорошая карусель Owl Carousel