well you got a page like this for your layout: https://kriesi.at/themes/enfold-photography/

try:

@media only screen and (max-width:767px) {
  #top .av-logo-container .inner-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "nav logo";
  }

  #top .av-logo-container:after,
  #top .av-logo-container .av-sidebar-social-container {
    background-color: gray;
  }

  .responsive #top #header .logo {
    grid-area: logo;
    width: unset !important;
    justify-self: end;
  }

  .responsive #top #wrap_all .main_menu {
    grid-area: nav;
    justify-self: start;
    width: unset !important;
    left: 0;
    right: unset;
    position: relative;
  }
}

/* === change the width values to your needs f.e. 500px instead of 350px  === */
/* === burger slide-out from the leftside === */

.av-burger-overlay-scroll {
  width: 350px;
  left: -350px;
  max-width: 100%;
  transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
}

.html_av-overlay-side .av-burger-overlay-scroll {
  left: 0;
  max-width: 100%;
  transform: translateX(-350px);
  transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
}

/* === hide header on home page === */

@media only screen and (min-width:768px) {
  .html_header_sidebar #top.home #header {
    display: none !important;
  }

  .html_header_left #top.home #main {
    margin-left: -2px !important;  /* === to ensure there aren't any white flashes on the left  === */
    position: relative;
  }
}

and maybe then it would be nice to get rid of that small border too:

.avia_transform .av-extra-border-element.border-extra-diagonal.border-extra-diagonal-inverse .av-extra-border-inner {
  background-color: #FFF;
}

#top .container_wrap {
  border-top-style: none;
}

Looks nice!
U bent van harte welkom

you can upload that font-file in a separate zip. i offered it here : https://webers-testseite.de/OpenSans-Variable.zip

you can choose it the same way as the static font on the bottom of that dropdown list.

can you see in DOM that those classes are added?
how did you insert your snippet ot wordpress?

f.e. in child-theme functions.php:
btw. you place your sbi shortcode to your content – why don’t you give the parent element (f.e. color-section a custom class: noLightbox ) – i did it that way !

function add_noLightbox_class_to_sbi_link(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
  (function($){
      $('.sbi_link').addClass('noLightbox');
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'add_noLightbox_class_to_sbi_link');

by the way – is it intentional that you have both menu-items and burger menu icon – on large screens?
it is much easier to have multiline main menu on displaying it as flex box.

Yes that is a nice idea.

so first try this in addition to my code from example page:

#top .gridded-flipbox .avia-icongrid-wrapper, 
#top .gridded-flipbox .article-icon-entry {
  width: 100%;
  height: 100%;
  min-height: unset !important;
}

@media only screen and (min-width: 990px){
  #top .gridded-flipbox .avia-icongrid-flipback  .avia-icongrid-inner {
    padding: 10px !important;
  }
  #top .gridded-flipbox .avia-icongrid-flipback p {
    hyphens: auto
  }
}

have you set the custom class on the element?

the element (Icon/Flipbox Grid) itself got that custom class: gridded-flipbox

and if aspect-ratio does not exist, why does it work on my site? (Enfold 7.1.1)
there is a porperty : aspect-ratio – see:

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

btw: the declaration is :
aspect-ratio: width/height;
but there is a shortform – that if there is no height value – height is 1

so :
aspect-ratio: 1/1 can be written as aspect-ratio: 1

All is based on the square source images – grid layout and – background-size: contain.

because i do not see any cover on your page- do you solve it?

#top .wp-playlist-current-item img {
  display: none;
}

___________
or do you mean : how to show them?
if you like to have cover:
on element (audio player) – player tab: do not enter a cover image ( only if you like to have for all items in the playlist the same cover)
on “Media Icon/Album Cover”
now your audio files must have an embedded cover. – you can see if the file got an embedded cover on media-library popup – when you choose your files:
i embed a cover to your file and uploaded it to my text page – :

I have now updated all of my installations to PHP 8.3 or higher. Some of my customer providers already offer PHP 8.4. I have never had any problems switching. Therefore, I assume there is high compatibility with current PHP versions. My overloaded test site runs under PHP 8.4.7. For example, the child-theme functions.php has over 5,000 lines, and the quick CSS is already over 9,700 lines long. (webers-testseite.de).

Why don’t you try going back to smaller PHP versions one at a time? It may take a while for this to take effect. Then, see if your installation works with your provider.

Now, please could you explain how this is supposed to work with a responsive layout, where the width of the grid cells changes according to the width of the screen?
The size of the Flipbox depends on your content, not the images (as these are defined as background images).

Firstly, please explain where the images are located. Are they on the front or back? It is also important to specify which element should be displayed first. You also have the option of displaying the back first and then the front on hover.
What options did you choose on background-image

maybe you can make the link public – that even me and other participants can inspect the problem.

In this context, I would like to ask you a general question. The following picture shows what happens when you uploaded the font.

If I want to use variable fonts, I upload static and variable fonts in separate ZIP files.

and:

You can then use the variable font style only for your page and, as the name suggests, define the weight and width variables for Open Sans, for example. There are predefined settings internally. So, if you are still using the old designations, such as ‘Condensed Semibold’ then would be wght: 600; wdth: 75%
This means that the font is rendered as font-weight:600 and the letters would be 75% wide.

In the meantime, it seems to be justifiable to use only the variable font.
However, if you only need a few font styles, it may be more performant to upload only the few static font styles. For example, just one zip file containing only OpenSans 300, 400 and 700. With many fonts, the italic font rendered by the browser differs only slightly from the dedicated italic font (this is mainly the case with serif fonts)

PS: So my advice is. Upload only the varialbe font. Make sure that the woff2 files are included in the zip. They are even smaller as a file and are rendered faster by the browser.
And here is the problem: Google only offers ttf as font files. I created with a comandline tool the ttf to woff2 files:
OpenSans-Variable.zip

How did you create this image with text underneath?

See here : https://webers-testseite.de/mie-2/

bei dem grünen Logo bitte auch die original Größe einsetzen!