Сергей delphinpro

Вот честное слово, когда вижу такие вопросы хочется ругаться матом.
Скажите, пожалуйста, вы учились в средней школе, или после детского садика сюда пришли?

Имеем выражение: (100vh - 656px) / 2 + 330px =
Раскроем скобки:     100vh / 2 - 656px / 2 + 330px = 
Выполним деление:    50vh - 328px + 330px
Сложим коэффициенты: -328px + 330px = 2px
собираем воедино:    50vh + 2px

Это что касается формулы.

В остальном совсем все просто. Сначала вычислится высота (50vh + 2px), и если она окажется менее, чем 330px, то станет равной трёмстам тридцати пикселям.

Padding уберите у параграфа. Используйте отступы на внешнем элементе, если необходимо.

Кстати, попробуйте увеличить паддинг до больших значений (~50px), увидите как работает лайн-кламп.

Я бы не делал общий контейнер

<!-- лэйаут -->
<div @class(['about-content' => request()->is('About')])>
    @yield('content')
</div>

<!--Дочерний-->
<div class="pb-5 management-content">
  <div class="container">
    <h2>MANAGEMENT PHILOSOPHY</h2>
    ...
  </div>
</div>

Ну и понятно, к ларавел это никак не относится.

nav:hover .master { bg: black; }
nav:hover .master:hover { bg: blue; }

Можно через has

nav:has(.rabota:hover) .master {  bg: black; }
// Если внутри nav навели на ссылку работа, то у мастера выключить подсветку

В данном случае – изучить документацию Bootstrap
Если что-то непонятно будет, то тогда и задавать конкретные вопросы

А в чем сложность?

простая математика. исходные данные: координаты блока относительно окна браузера (elemtnt.getBoundingClientRect()) и высота окна (window.height).

Если y_top <= 0 и y_bottom >= window.height То высота видимой части блока равна высоте экрана (первая ваша картинка).
Если y_top > 0 и y_bottom < window.height То высота видимой части блока равна высоте это блока (весь виден).
Если y_top > 0 и y_bottom > window.height То высота видимой части блока равна высоте экрана минус верхняя позиция (вторая картинка).
Если y_top < 0 и y_bottom < window.height То высота видимой части блока равна значению нижней позиции (третья картинка).

Используя функцию repeat() и пользовательские свойства, можно задавать кол-во колонок в разметке, без хардкодинга в css. Не совсем то, что вам нужно, но кол-во ячеек, как правило известно при выводе информации, и серверный код вполне может проставить нужно значение.

У гридов нет свойств для изменения направления. Есть у флексов, но только по одной оси.
Поэтому проще будет вывести разметку в обратном порядке.
Примерно так:

Не то свойство используете

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

Съезжает верстка при адаптации под мобильные устройства, что делать?

Есть такие варианты

1. Предварительная подготовка текста.
1.1. Либо вручную с помощью подобных сервисов https://betravis.github.io/shape-tools/hyphenator/
1.2. Либо php-скриптом при сохранении/или выводе на страницу, вроде такого https://github.com/heiglandreas/Org_Heigl_Hyphenator
2. Использовать javascript-библиотеку для расстановки переносов, типа такой https://github.com/mnater/Hyphenopoly

нельзя фиксированно указать где будет перенос

ото­ри­но­ла­рин­го­ло­гия

flex-wrap: wrap;

Какой-то блок не имеет возможности сжаться до таких размеров и "выпирает".