Дуболом Одноклеточный

убери у .element-grid__text white-space: nowrap;

.element-grid__text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 29px;
    color: black;
    padding: 0;
    text-overflow: ellipsis;
    /* убери white-space: nowrap */
/*     white-space: nowrap; */
    /*overflow: hidden;*/
    max-width: 88%;
}

white-space определяет перенос текста, если текст жмет какой-то блок

Изменено: чтобы в конце многоточие было нужно задать text-overflow: ellipsis; а также height: 100%; тексту, чтобы overflow: hidden; его не скрывал полностью:

.element-grid__text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 29px;
    color: black;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 100%;
    max-width: 88%;
}

если не задать высоту тексту, то css будет считать, что у текста вообще нет высоты, соответственно overflow: hidden; будет "обрезать" его

Изменено 2 (важно):
Оказывается текст должен быть в красной рамке, для этого нужно обнулить margin:

.element-grid__text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 29px;
    color: black;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    max-width: 88%;
}

margin выталкивает текст из блока и overflow: hidden скрывает его, а height: 100% не надо

display: flex;
justify-content: right; /* или align-items: right */
width: 100%;

Изменено:
https://codepen.io/duboloms/pen/PoZPrje?editors=0100

let countOfElements = $(".element").length;
let maxCountOfElements = 16; // максимальное кол-во элементов на одной типа "странице"

if(countOfElements  > maxCountOfElements ){
  // твой код, который перемещает элемент, на следующую так сказать "страничку"
  // а также, чтобы взять все элементы, после первых 16 элементов (это те элементы, которые надо 
 // переместить на след страницу)
 // что то вроде этого:
 // for(let i = maxCountOfElements; i < maxCountOfElements * 2){
 //  $(".element").eq(i); // элементы, которые должны быть на второй странице
 // }
}

Попробуй подключить css стили owl carousel.

--После перехода на страницу там есть кнопки: js, css, image, тебе нужно css, нажми на эту кнопу и там будут ссылки которые ты должен будешь подключить в шапке к твоему сайту--

Подключишь через тег link:

<link src="та ссылка которую ты скопировал с cdnjs.com" />

Изменено:
Скорее всего это из-за того, что у тебя блок otzyv обернут в еще один div без класса. Просто убери этот лишний оберточный блок у каждого комментария

Изменено 2:
Помести все контейнеры еще плюс в дополнительную обертку. Т.е. для всех элементов, сделать ОДНУ обертку: https://owlcarousel2.github.io/OwlCarousel2/docs/a...

Посмотри не указан ли тегу body height 0 или там overflow: hidden, если да убери и напиши это

body {
  overflow: scroll;
}

.box2 {
  transform: translate(-20%, -20%); /* или сюда вместо процентов ширину первого квадрата забей */
}

Чел, я тебя конечно не хочу пугать, но тут чтобы такое сделать, тебе нужно как минимум порвать мозги если ты не имел дело с 3d моделями:
https://threejs.org - библиотека, которая создает легкий доступ к WebGL (короче просто 3d моделирование)
А 3d модели вот тут:
https://sketchfab.com/feed