ok – was genau ist mit “funktioniert nicht” gemeint?
– bei Scroll das flickern der Hintergrund Grafiken?

Ist es sinnvoll 3 columns nebeneinander in eine 1/2 Grid-Zelle zu pressen?
(PS man kann übrigens, die Cell-Breiten ändern : “Set Cell Size”)

PPS: ich denke hier an Board sollten wir untereinander Duzen. Im Englischen ist da ohnehin kein Unterschied.
– weiterhin ist die Seite – und das brauche ich Dir ja nicht sagen – extrem abmahngefährdet ( gstatic/recaptcha etc. läßt grüßen )

this will be hard to get – because each of the grid-rows are a unique container.
you can define the order inside this grid-row ( like mike shows above) – but not switch between different grid-rows.

i would do this with color-section and 15 1/5 columns ( this is not needed because width will be set in a different way ) – and it looks nicer in the backend.
We have total control over all columns by giving them unique names ( this is better to handle – then the css selectors )
( on my example page : feld1, feld2 etc ( that means field1, field2 etc. ) )

the position is set by the property: grid-template-areas
see example including code on: https://webers-testseite.de/griddy/

see what happens in between 550px and 767px – you can combine ( like in a table with colspan or rowspan) areas and fill with only one field.
see when the responsive view is on one Column only. the area 5 is above area 10 etc.

Offtopic
by the way – the template_redirect could be used to have not the ugly : //domain/?s=xyz on search results page
but //domain/search/xyz

function re_rewrite_rules() {
  global $wp_rewrite;
  $wp_rewrite->search_base = 'search';
  $wp_rewrite->flush_rules();
}
add_action('init', 're_rewrite_rules');

function change_search_url() {
    if ( is_search() && ! empty( $_GET['s'] ) ) {
        wp_redirect( home_url( '/search/' ) . urlencode( get_query_var( 's' ) ) );
        exit();
    }
}
add_action( 'template_redirect', 'change_search_url' );

i can find this css in your setting:

homepage:

.avia-slideshow li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  list-style-position: outside;
  position: absolute;
  visibility: hidden;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  clear: both;
  opacity: 0;
  overflow: hidden;
}

visibility: hidden; opacity :0

.av-masonry-entry {
  position: relative;
  display: block;
  width: 24.9%;
  float: left;
  clear: none;
  text-decoration: none;
  visibility: hidden;
  opacity: 0;
}

visibility: hidden; opacity: 0; ?

For: “Case Study: Amrop Executive”
Are you talking about the responsive view – when the grid cells are displayed one below the other?
If the image is only background-image – this is no content. So you had to give a height or min-height property to those cells.

Actually, I thought there was a min-height option for the individual grid cells (but only for the whole grid-row it does exist). Just put a separator/whitespace in such cells with the desired height.

________

on those three pages and the “Why Choose the Coral Starfish” – there should be banners?
can you name the images you set in – it is then easier to look for it in the DOM

you have various revisions of these pages – try going back if you have accidentally deleted them.

Do you use Safari Browser ?

see: https://kriesi.at/support/topic/enfold-back-end-not-working-in-safari-on-sequoia/#post-1468431

what was the solution? first snippet or css bug fix?

Unfortunately, due to a lack of developer tools, mobile browsers cannot be tested in the same way as desktop browsers. Unfortunately, the emulators aren’t accurate enough.
Since scrolling is triggered by a swipe (touch), I suspect that you could, for example, slightly touch a button which then gets the focus.
This is very speculative, but worth a try.

Try ( in this case only for that page-id of https://coralstarfish-com.stackstaging.com ) in your child-theme functions.php:

function blur_all_avia_buttons() { 
if(is_page(22)){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 	
(function($){
	$('.avia-button').addClass('btn-blur');
	$('.avia-button.btn-blur').on('mousedown touchstart', function(){
		$(this).blur();
	});	
})(jQuery);
});
</script>
<?php 
}
}
add_action('wp_footer', 'blur_all_avia_buttons');

Please delete the caches, especially in the mobile device itself.

to influence the native list-point only – there is no way. Even a list-point color does not exist.

You can only influence the whole list item, it is not possible to influence only the list-style-type.
you do not need to set the color – then it will be inherited from text-block.
Are these red points dots? “disc” – so get rid of color property – and adjust the font-size to your needs.

if you just want to increase the font-size of the list-items select them by the li element and set the font-size property:

#top .avia_textblock > ul > li {
  font-size: 18px;
}

Your wording and topic title led me a little astray. If only you had written: Font-size of the list – that would be clearer

to influence the native list-point only – there is no way. Even a list-point color does not exist.
But you can set the list-points to display: none – and put in front of the list-items a different icon:
see an example here with all the code you need: https://webers-testseite.de/list-point-styling/

Why does the alb_custom_layout not have the advanced layout editor.
on classic editor there are all alb possibilities too – then only via the drop-down menus, so you could make the same mistakes here as with the Advanced Layout Builder.

ok – nice to have the page link (on your other topic it is shown):

there are links on the images too – but they could not be clicked because there is a full overlay of the grid-content
so no need for a script here

#top .grid-content {
  pointer-events: none;
}
/*** if you do not like to have that image white overlay:*****/

#top .grid-entry .image-overlay {
   display: none !important;
}

__________________________
this will work too – but it is not needed here

function transfer_first_link_as_link_to_article(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {
      $('.grid-content').each( function() {
        var LinkSection = $(this).find('.grid-entry-title a').attr('href');
        var LinkTarget = $(this).find('.grid-entry-title a').attr('target');
        if (typeof LinkSection !== "undefined"){
          $(this).on("click", function(){
            if (LinkTarget === "_blank"){
              window.open(LinkSection, '_blank'); 
            } else {
              window.location.href = LinkSection;
            };
          });
          $(this).css('cursor','pointer');
          $(this).find('.image-overlay').css('display','none');
        };
      });
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'transfer_first_link_as_link_to_article');

What I would also find useful is if the Admin or Editor (if included in that role) could also see and change the blocked items. And the setting to hide blocked items only affects the other roles.

The child theme name does not appear in the frontend. So why rename the child theme?
Just to obfuscate the Enfold origin – this involves much more than just changing the name.

By the way – it is a good idea – to have a backup on this. And perhaps if you rename child and parent theme to save your theme settings file and maybe the quick css.

As long as you do not change the reference in the style.css of the child theme to the parent element, you can rename it as you wish.
Enfold even offers you the option of renaming the stylesheet of the Theme using a filter.
but read here carefully on the docu: https://kriesi.at/documentation/enfold/personalize-theme/

function avia_change_filename($stylesheet){
return 'myfilename';
}
add_filter('avf_dynamic_stylesheet_filename', 'avia_change_filename');

by the way dear dev/mods: on docu this snippet is listet with myfilename.css – this will lead to myfilename.css.css – so above only the name is neccessary – the css extension is added to the filename by default.

I must say, however, that those who are able to examine such things more closely will always recognise the basis of the theme.

if you want it 5 columns on desktop and on mobile always 2 column:

#top .settore-attivita .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#top .settore-attivita .entry-content-wrapper:before,
#top .settore-attivita .entry-content-wrapper:after {
  display: none !important;
}

#top .settore-attivita .entry-content-wrapper .flex_column {
  flex: 0 1 19%;
  width: unset !important;
  margin: 0px;
}

@media only screen and (max-width: 767px) {
  #top .settore-attivita .entry-content-wrapper .flex_column {
    flex: 0 1 48%;
  }
}
}

you see how it works ?