if you only want to link from the picture to one side once, it is difficult to implement.
Some of the elements (Masonry Gallery, Gallery ) have the option: under ‘Advanced Tab’ – Image Link : ‘use custom link – fallback is image’. However, the value entered is then entered globally under the image. So if you only want to set the link to a page in one of the galleries, you have to upload a copy of the image.

this technique is called : infinite scroll – maybe that older post can help you on that:
https://kriesi.at/support/topic/quick-way-to-add-infinite-scroll/#post-681490

Edit: it still works.
Download that little script: https://jscroll.com/#/installation
and upload it to your child-theme js folder ( if there is none – create that child-theme subfolder )

I load the script only for my test page (ID: 45777)
put this to your child-theme functions.php:

function my_custom_infinite_scoll() {
    if ( is_page(45777) ) {
        wp_enqueue_script( 'avia-child-jscroll', get_stylesheet_directory_uri().'/js/jscroll.min.js', array('jquery'), 2, true );
    }
} 
add_action('wp_enqueue_scripts', 'my_custom_infinite_scoll');

and

function infinite_scroll() {
if ( is_page(45777) ) {
?>
<script type="text/javascript">
(function($) {
$( ".content" ).jscroll({
	loadingHtml: '<img src="/wp-content/uploads/anim-world.gif" alt="Loading" /> Loading...',
	nextSelector: 'span.current + a',
	contentSelector: '.article-grid',
	autoTrigger: true,
});

})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'infinite_scroll', 999);

In my case it is a blog element – give that custom class: article-grid to that element.
Read the setting carefully ( with pagination – this nav is set to display none via css )

see: https://webers-testseite.de/infinite-scroll/

Warum denkst du so kompliziert?
Warum machst du nicht ganz normal 1/2 columns und setzt jeweils dort ein Text-block hinein. Das bild kannst du dort im Text-Block auch als links – bzw. rechtsbündig setzen.
Ist auch für das responsiv verhalten wesentlich leichter zu handhaben. Versuch doch mal durchzuspielen, wie dein Layout – speziell die Bilder reagieren sollen bei schmalen Screens!
PS: komplexe layouts kann man mit dem Grid Layout erstellen – aber wie gesagt – warum kompliziert wenn es auch einfacher geht.
__________

Why don’t you just make 1/2 columns as normal and put a text block in each. You can also set the image in the text block to be left-aligned or right-aligned. It is also much easier to manage for responsive behaviour. Try playing around with how your layout – especially the images – should react on narrow screens!

PS: complex layouts can be created with the Grid Layout – but as I said, why make it complicated when it can be simpler?

see: https://webers-testseite.de/grid-layout-modul/
PPS: die Felder müssen nicht immer definiert werden, aber man kann dann sehr (sehr) flexibel die Zellen im responsiven Fall behandeln.

so it is not a second menu meant but a different one ?

Well – if that is what I think you want, then there is no trivial solution.
i did it here for very small screens (mobile device screen width) on : https://guenterweber.com/datenschutz/
because the widget ( second menu) on that page needs more place – that is not there on small screens.

Base of even the Enfold Hamburger (av-hamburger–spin) for main-menu is : https://jonsuh.com/hamburgers/

do not forget that on jQuery 3.x the

jQuery(window).load(function(){

is deprecated – it has to be now:

$(window).on('load', function(){

in addition to that – why do you like to open a different page in the lightbox?
do you have on many pages that button?

big hussle is that it is no button element – it is an input – with button functionality.
if it is a button tag – then styling is much easier.

you can change that by child-theme functions.php snippet:

function change_input_to_button_tag(){
?>
<script>
  (function($) {       
      function replaceElementTag(targetSelector, newTagString) {
        $(targetSelector).each(function(){
          var inputvalue = $(this).attr('value');
          var newElem = $(newTagString, {html: $(this).html()});
          $.each(this.attributes, function() {
            newElem.attr(this.name, this.value);
          });
          $(this).replaceWith(newElem);
          newElem.append('<span class="submit">'+inputvalue+'</span>');
        });
      }
      replaceElementTag('.avia_ajax_form input.button', '<button></button>');
  }(jQuery)); 
</script>
<?php
}
add_action('wp_footer', 'change_input_to_button_tag');

have a look on that page – open editor – on the right side there are layout options – including a part for footer setting and footer behaviour.

Unfortunately, exactly this option is missing – only display the socket and hide the footer page.
There is probably no other option than to set the footer page to display none with the page ID.

f.e.:

#top.page-id-3 #footer-page {
  display: none;
}

a fast way might be to only replace the content:

#scroll-top-link[data-av_icon]::before {
  content: url(/wp-content/uploads/myTest.svg);
}

But I only tested it with an svg file, so I had no problems getting the dimensions to fit.

this is very nice !

on mobile we have this behaviour (close on click outside) already – because of Content Setting : “Mobile Close Behaviour”
does your script interfere with it?
On mobile even a click on a different Flip-Card closes the other ones. ( that is my prefered behavior) and closes all on clicking outside.

maybe it has to do with the default strip_tags option on many excerpts ( post_excerpt )
or that function avia_backend_truncate often used in enfold to filter strings.

PS try <strong> instead of <b>
strong , em and span are excluded tags from strip_tags

i would prefer this solution:

#top.page-id-102 #av_section_1 .flex_column img {
  -webkit-filter: brightness(0.6) blur(3px);
  filter: brightness(0.6) blur(3px);
  transition: filter 1s ease;
}

#top.page-id-102 #av_section_1 .flex_column:hover img {
  -webkit-filter: brightness(0.8) blur(0px);
  filter: brightness(0.8) blur(0px);
  transition: filter 1s ease;
}