Вадим Кот

<picture>
                        <source media="(min-width: 1260px)" srcset="css/images/footer-top-img-xlg.jpg">
                        <source media="(min-width: 1008px)" srcset="css/images/footer-top-img-md.jpg">
                        <img src="css/images/footer-top-img.png"
                             alt="" title="">
</picture>

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

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

.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 что ли

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

Заголовки у секций должны быть в любом случае. Необходимо думать и о accessibility сайта. Скринридеры должны четко видеть структуру сайта. Есть разные способы: aria-label, aria-labeledby, visually-hidden паттерн (https://htmlacademy.ru/blog/useful/css/short-12). Подробнее об этих методах почитайте в статье на css-tricks https://css-tricks.com/how-to-section-your-html/#a...
А разметка в вашем примере будет примерно такая

<section class="page-section advantages">
  <h2 class="visually-hidden">Наши преимущества<h2>
  <div class="container advantages__container">
    <div class="advantages__item">advantage1</div>
    <div class="advantages__item">advantage2</div>
    <div class="advantages__item">advantage3</div>
  </div>
</section>

Так чекайте на предмет мобильного устройства с помощью https://github.com/hgoebl/mobile-detect.js
По поводу единичных случаев подмены userAgent, с этим не стоит бороться. Ваш алгоритм то предусматривает какое то разветвление и другое действие для не мобильных устройств. Дополнительная проверка на ширину устройства будет вообще ненадежным методом определения мобильного. Если говорить про исключения, то ведь есть еще планшеты с симками с установленными звонилками. Все не предусмотришь.

https://jsfiddle.net/p1n8djk4/