Вадим Кот

Попробуйте вот эту библиотеку https://github.com/imakewebthings/waypoints

https://codepen.io/web-tech/pen/qeaEMb

Нужно делать это на чистом html - добавлять классы пунктам, которые содержат вложенные пункты.
Должен быть вот такой пункт меню

<li class="menu__item menu__item--has-children"></li>

https://codepen.io/web-tech/pen/XLvVZG
Ну и еще 8 способов https://css-tricks.com/injecting-line-break/

https://codepen.io/web-tech/pen/VJOdmx

https://codepen.io/web-tech/pen/BgeVoM

поднять вверх

.class {
  margin-top: -Npx;
}

сместить влево

.class {
  margin-left: -Npx;
}

https://www.smashingmagazine.com/2009/07/the-defin...

Ну и position никто не отменял - absolute размещаешь относительно ближайшего не position static элемента, relative относительно собственного расположения элемента. При этом top, right, bottom, left также могут быть с отрицательными значениями.

будто бы ДИВ на этом месте заканчивается

Так и есть - div на этом и заканчивается. Дочерние элементы (float) выпадают из родителя и он схлопывается до элемента .clearfix с clear: both; - прочитайте про clearfix что ли

.class {
  background: 
    url('/assets/images/offers/key.png') bottom 30px right 0  / 50% no-repeat, 
    url('/assets/images/offers/sell.png') bottom right no-repeat #F7F7F9;
}

или

.class {
  background: 
    url('/assets/images/offers/key.png'), 
    url('/assets/images/offers/sell.png') #F7F7F9;
  background-position: bottom 30px right 0, bottom right;
  background-size: 50%, auto;
  ​​​​​​​background-repeat: no-repeat;
}

Смотри документацию https://developer.mozilla.org/ru/docs/Web/CSS/back...
Там же написано

bg-size
Смотри background-size. Это свойство должно быть указано после background-position, разделенного символом '/'.
MDN

Уберите для .card-item-wrapper .item-block display: inline-block;
В случае с css columns inline-block бессмыслен, да и еще и добавляет внизу отступ (есть такой нюанс при работе css columns с inline-block в некоторых версиях webkit браузеров).
А чтобы перенос происходил так, как у вас был с inline-block, добавьте breake-inside:

.card-item-wrapper .item-block {
    padding: 0 15px;
    margin-bottom: 1rem;
    max-width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

https://codepen.io/web-tech/pen/pXLXBG

https://codepen.io/web-tech/pen/EBEwBr

Замените строку
<?php if ($home == $og_url): ?>
на
<?php if ($home == $base): ?>

Без jQuery c waypoints

https://codepen.io/web-tech/pen/Gbxqor

https://jsfiddle.net/vadimkot/py0z9o4e/1/

https://caniuse.com/#feat=object-fit

Это vertical timeline
Вот примеры:
https://codepen.io/letehaha/pen/xOxdze
https://codepen.io/shadowrogue42/pen/OYyoqN
https://codepen.io/AndreyUgarov/pen/xOrARE
https://codepen.io/knolaust/pen/ONXXJj
https://codepen.io/stefan-baumeler/pen/rLMmzg
https://codepen.io/mizpayne/pen/OROWdj