ok –
put this to your child-theme functions.php:
(try if the window on load is neccessary)

function set_class_for_image_orientation(){
?>
<script>
(function($) {
  $(window).on('load', function(){
    var images = document.getElementsByTagName('img');
    for( var i=0; i<images.length;i++){
      if(images[i].naturalWidth > images[i].naturalHeight) {
        $(images[i]).addClass('landscape');
      }
      else if (images[i].naturalWidth < images[i].naturalHeight) {
        $(images[i]).addClass('portrait');  
      }
      else {
        $(images[i]).addClass('square-image');
      }
    } 
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'set_class_for_image_orientation');

now every image got a class on img that belongs to its orientation

then place that code to your quick css:

#top .avia_textblock.img-with-caption-right .wp-caption img.portrait {
  margin-top: 0
}

and perhaps you like to go back to the same width if responsive case (smaller than 767px)

@media only screen and (max-width: 767px) {
  #top .avia_textblock.img-with-caption-right .wp-caption {
    grid-template-columns: 1fr 1fr;
  }
}

try to change that one rule to:

(it is only that line changed: grid-template-columns: auto 1fr; )

#top .avia_textblock.img-with-caption-right .wp-caption {
  border: 1px solid #cccccc;
  width: 100% !important;
  margin: 0;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: auto 1fr;
  grid-template-areas:
"feld2 feld1";
  align-items: flex-end;
}

the section itself is set to : av-small-hide av-mini-hide.
those flex_columns with .scroll-reveal trigger are set on visibility : av-hide-on-mobile
look at the column advanced tab under responsive. Your added Class could not work on that – because it is set to display : none by your responsive settings.

is it because you are working with the other option to show that animation?

if this section and the columns are set to be there on responsive case the class “active” is added.

_____________________

by the way – this is my observer sccript to get a new class added to flex-columns that comes into viewport.
( i do not stop observing, because i like the animation on scroll-in/out again and again ;)

function observe_columns() {
?>
<script type="text/javascript">	
	document.addEventListener("DOMContentLoaded", function() {
	  var flexcolumns = [].slice.call(document.querySelectorAll(".flex_column"));
		
		if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
			let flexcolumnObserver = new IntersectionObserver(function(entries, observer) {
				entries.forEach(function(entry) {
					if (entry.isIntersecting) {
						entry.target.classList.add("visible");

					}
					else {
						entry.target.classList.remove("visible");
					}  
				});

			}, {
				root: null,
				threshold: 0.1,
				rootMargin: "20px 0px -10px 0px",
			});
			
			flexcolumns.forEach(function(flexcolumn) {
				flexcolumnObserver.observe(flexcolumn);
			});
	  	}
	});
</script>
<?php
}
add_action( 'wp_footer', 'observe_columns' );

see in action f.e. under “Dienstleistungen”
https://webers-web.info/

Do you prevent the hover for first level menu items? By default, these are available for the desktop menu.
This is the reason – why i had to click (including load of that extra page) to see the sublevel menu-items.

I came across this topic. I am having the same problem. How to disable the “next” arrow when at the last slide. Same how to disable the “back” arrow when at the first slide.