on your ngg gallery you are showing images !
on your test page : https://peter-test1.co.uk/portfolio-item/test/
you are trying to show portfolios? – why not showing images masonry or gallery instead? https://peter-test1.co.uk/gallery/
And btw. why do you removed the css for the gallery ? You like to show now the full-width?

see: https://kriesi.at/support/topic/responsive-issue/#post-1492074

yes – but you can even remove those empty columns ( left and right )

just place the “The Flight Of Dragons” the same way as the others – you do not need to fill up the last row with empty columns.

Do you really want it to be that narrow on small screens?
I would set the content differently to narrow. Therefore, remove:

#section-width {
  max-width: 50%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

and set instead:

#section-width .container {
  max-width: 750px;
}

And here’s the next layout tip.
I would place different design elements in different color sections.
So all gallery images in one section (#section-width) – including the single one that comes last – without empty columns – then the films below in a separate section.

If you have done that – i will give you a flex-box code to style your gallery.

Yes – but that downloaded zip file from fontsquirrel is not the neede zip for uploading it to enfold fontmanager.
You had to pull out the fontfiles into a separate folder and compress that folder for uploading.

use the font-manager of enfold – it works great – even for variable fontfiles

first – if you compress your font-files on a mac (OSX) it will include even the typically non visible files on OSX folder. This is what you see – when you are talking about Font: MACOSX ( font-family: macosx ).
But your font-file of berthold should be there too.

I do not know if fontsquirrel can convert otf files of variable Fonts to ttf or woff2.

just one moment – i’m looking for an older post of mine. …

https://kriesi.at/support/topic/how-to-submit-and-use-custom-fonts/#post-1470894

you can download that script app – just place it on your desktop – and drag & drop files there to zip.

Or use keka to compress your font folder. And do not include invisible files

after compression it should show inside that font zip file only the fonts – and nothing else:

have a look at: https://webers-testseite.de/woodnest/
i placed the styles and script as inline codes in a codesnippet.

there might be solutions if we have to put in one image column two content columns (f.e. 2/3 – 1/3)

maybe you can bring that arrow to your sub-menu container. But then you can not center it below top-level menu text.
But if you are satisfied by a fixed distance from the left (f.e. 20px ) this is a not so complex solution.

or you set the avia-arrow-wrap and avia-arrow to show- and fill with background-color and border-color.

even if it is not the current menu-item?

hm i did not try that because in class-avia-slideshow.php this parameter is missing on the array:

$video_data = apply_filters( 'avf_youtube_video_data', array(
	'autoplay' 		=> 0,
	'videoid'		=> $video_id,
	'hd'			=> 1,
	'rel'			=> 0,
	'wmode'			=> 'opaque',
	'loop'			=> 0,
	'version'		=> 3,
	'autohide'		=> 1,
	'color'			=> 'white',
	'controls'		=> $controls,
	'iv_load_policy'=> 3
));

but: as always, it only works muted.
Thanks Ismael – i will keep that snippet in mind. btw: then you can set an end time too:

add_filter( 'avf_youtube_video_data', function( $data ) {
    if( !empty( $data['videoid'] ) && $data['videoid'] === 'G0k3kHtyoqc' ) {
        $data['start'] = 15;
	$data['end'] = 40;
    }
    return $data;
});

However, the video behaves this way only when first called up. Once the slideshow has run through its first cycle, these settings are no longer taken into account. Furthermore, if you have selected autoplay, the video will be interrupted after the slider autorotation duration and the next slide will be called up.

if you like to have the pipes between the links:
adjust the new switch point when the links goto a twoliner:

@media only screen and (max-width: 467px) {
  #header {
    height: 160px !important;
    max-height: 160px !important;
  }
  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 160px !important;
  }
} 

and for phone-info:

/******  styling the phone-info links with pipe separator  *************/
#top #header_meta .phone-info {
  display: flex;
  flex-flow: row wrap;
  gap: 0 40px; 
}

#top #header_meta .phone-info a {
  flex:  1 1 auto;
  position: relative;
}

#top #header_meta .phone-info a:not(:last-child)::after {
  content: '|';
  font-size: 18px;
  position: absolute;
  right: -24px; 
  color: #FFF;
}

There is a lot more to think of.
First – to style the header_meta with your phone-info entries.
To prevent breaks occurring where it looks unsightly, it would be a good idea to replace your entries completely with this line:

<a style="white-space: nowrap" href="/over-ons/">Over Ons</a><a style="white-space: nowrap" href="/veelgestelde-vragen/">Veel gestelde vragen</a><a style="white-space: nowrap" href="#">Nieuws</a><a style="white-space: nowrap" href="tel:+31434551268">T: +31 (0)43 455 12 68</a>

after that we will see if the pipes are neccessary.

On mobile devices, these links become two lines—and this must also be taken into account with the padding-top of main.

After you have these new phone-info – remove your code from above and try:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }

  #header {
    position: fixed !important;
    height: 110px !important;
    max-height: 110px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 110px !important;
  }

  #top #header.av_header_transparency #header_meta {
    background-color: transparent;
  }

  #header_main {
    border-bottom: none;
  }

  #header:not(.av_header_transparency) #header_main {
    box-shadow: 0 5px 10px #eee;
  }

  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px !important;
    max-height: 80px !important;
    line-height: 80px !important;
  }

  .responsive #top #avia-menu > .menu-item-avia-special > a {
    height: 80px !important;  ;
    line-height: 80px !important; 
  }

  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #FFF !important;
  }  

  #top #header:not(.av_header_transparency) .header_bg {
    background-color: #FFF !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }

  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
    background-color: #FFF;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
    color: #FFF;
  }
}

@media only screen and (max-width: 767px) {
  #header {
    position: fixed !important;
    height: 140px !important;
    max-height: 140px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet #top #main {
    padding-top: 140px !important;
  }
}

@media only screen and (max-width: 435px) {
  #header {
    position: fixed !important;
    height: 160px !important;
    max-height: 160px !important;
  }
  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 160px !important;
  }
} 
/****** End *************/

/******  styling the phone-info links  *************/
#top #header_meta .phone-info {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 0 30px;
}

Then I sincerely hope that translation errors like those in “The Hungarian Phrasebook” don’t creep in.
https://youtu.be/grA5XmBRC6g?si=Mqnuk1FpjPJAipeQ&t=50

Please leave technical terms untouched, as they are commonly used.
A button is simply a button, and you can hover it, etc. …

If you absolutely want such translations, get the corresponding Lang file from the Lang folder (only po is needed to edit).
Open the po-file in f.e. poedit (free po editor) Search for your Phrase – f.e. “Show Fullscreen Button (HTML5 videos)”
Enter your translation and save (poedit will save the new po-file and generates the concerning mo-file too).
Upload these files to your child-theme/lang/ folder and put this to your child-theme functions.php:

function overwrite_language_file_child_theme() {
    $lang = get_stylesheet_directory().'/lang';
    return $lang;
}
add_filter('ava_theme_textdomain_path', 'overwrite_language_file_child_theme');

keep the sequence of variables inside your translation.
F.e. : But we are proud to say that %s contributed %s entries already.
first the name of the author for %s – then the number of contributions for %s

e.g. for german translations:
Wir sind jedoch erfreut, dass %s bereits %s Beiträge beigesteuert hat.
and not:
Wir sind jedoch erfreut, dass bereits %s Beiträge von %s beigesteuert wurden.

i do not see where your code misses some settings:
f.e. where does this comes from?

#top .av_inherit_color * {
  color: inherit;
}

try in your quick css:

#top .av-large-testimonial-slider .avia-testimonial_inner {
    display: inline-table;
}

#top .av-large-testimonial-slider .avia-testimonial_inner * {
  color: #FFF;
}

#top .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
  color: #FFF;
  opacity: 1 !important;
}

#top .alternate_color .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
  fill: #FFF !important;
  opacity: 0.5;
}

#top .alternate_color .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a.avia-svg-icon:hover svg:first-child {
  opacity: 1
}

Give your visitors a bit more time to read the testimonial – ( autorotation is to fast )

__________
btw:
you entered the custom class with a dot on Link
Enter it without
nevertheless it is added correctly to avia-testimonial-wrapper

there are some Plugins that will offer such a function: CatalogX (Freemium) or WooCommerce Catalog Mode
or you might use code snippets – but it is not as easy as it sounds. There are still backdoors that can be used to find something.

but this might give you a chance to exclude some Products by slugs ( f.e.: members-only or premium)

This is what an AI like Claude would give to you:

// 1. Hide from queries
add_action('pre_get_posts', 'hide_member_products_from_guests');
function hide_member_products_from_guests($query) {
    if (is_admin() || !$query->is_main_query()) {
        return;
    }
    
    if (!is_user_logged_in()) {
        $tax_query = $query->get('tax_query') ?: array();
        
        $tax_query[] = array(
            'taxonomy' => 'product_tag',  // product_cat → product_tag
            'field'    => 'slug',
            'terms'    => array('members-only', 'premium'),  // Deine Tag-Slugs
            'operator' => 'NOT IN'
        );
        
        $query->set('tax_query', $tax_query);
    }
}

// 2. Visibility Filter
add_filter('woocommerce_product_is_visible', 'filter_member_products_visibility', 10, 2);
function filter_member_products_visibility($visible, $product_id) {
    if (!is_user_logged_in()) {
        if (has_term('members-only', 'product_tag', $product_id)) {  // product_cat → product_tag
            return false;
        }
    }
    return $visible;
}

// 3. Block direct access
add_action('template_redirect', 'block_member_product_access');
function block_member_product_access() {
    if (!is_user_logged_in() && is_product()) {
        global $post;
        if (has_term('members-only', 'product_tag', $post->ID)) {  // product_cat → product_tag
            wp_redirect(wp_login_url(get_permalink()));
            exit;
        }
    }
}

// 4. Exclude from search (maybe an ajax pendent is needed too)
add_filter('posts_where', 'exclude_member_products_from_search', 10, 2);
function exclude_member_products_from_search($where, $query) {
    global $wpdb;
    
    if (!is_admin() && $query->is_search() && !is_user_logged_in()) {
        $where .= " AND {$wpdb->posts}.ID NOT IN (
            SELECT object_id FROM {$wpdb->term_relationships}
            INNER JOIN {$wpdb->term_taxonomy} ON {$wpdb->term_relationships}.term_taxonomy_id = {$wpdb->term_taxonomy}.term_taxonomy_id
            INNER JOIN {$wpdb->terms} ON {$wpdb->term_taxonomy}.term_id = {$wpdb->terms}.term_id
            WHERE {$wpdb->terms}.slug IN ('members-only', 'premium')  // Deine Tags hier
            AND {$wpdb->term_taxonomy}.taxonomy = 'product_tag'  // product_cat → product_tag
        )";
    }
    
    return $where;
}

// 5. Exclude from REST API 
add_filter('woocommerce_rest_prepare_product_object', 'hide_member_products_from_api', 10, 3);
function hide_member_products_from_api($response, $object, $request) {
    if (!is_user_logged_in() && has_term('members-only', 'product_tag', $object->get_id())) {  // product_cat → product_tag
        return new WP_Error('rest_forbidden', 'Zugriff verweigert', array('status' => 403));
    }
    return $response;
}