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!

diese beiden png’s sind im Original so klein (gemeint ist die file Größe – die hier kleiner als 60kb ist). , das du bei der Auswahl ruhig die originale einsetzten kannst. Also wenn das mediathek Fenster öffent dann das File auswählen und rechts dann die original Größe auswählen und einsetzen. ( eben nicht die kleingerechnete mittlere Variante ) – dann wird es auch schärfer.

PS: damit das weiße Logo auch ein wenig mehr heraussticht, könntest du dem einen Schatten hinzufügen – das hier in das Quick CSS Feld einsetzen:

#top .alternate.avia-standard-logo {
  filter: drop-shadow(2px 2px 3px #000);
}

The solution of Ismael will work – but it would be nice to have this only for the page used as footer-page.

versuch mal diese beiden : https://webers-testseite.de/Andrea.zip
das weiße dann für die Transparenten Header:
weisses Logo

kannst Du den Link zu der entsprechenden Seite öffentlich machen?
Das erleichtert einiges. Als Mitstreiter sehe ich die Links im private content nicht.

Ich vermute mal, das die Seite wo noch ein Enfold Logo gezeigt wird solche sind bei denen der Header transparent ist.
Für diese Option, die man auf den entsprechenden Seiten im Editor rechts einstellen kann, gib es ein alternativ Logo.
Das setzt man unter Enfold ( Enfold-Child falls du das eingerichtet hast) – Theme Optionen – Transparenzeinstellungen
aktivier den Switch (“Contains options for transparency header.”) – dann kannst du die Felder sehen, wo das Logo für die Transparenten Seiten eingefügt wird.

klicke es um es zu vergrößern: