try:

.trioDetails {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  margin: 10px 0;
  padding: 0;
}

.trioDetails * {
  margin: 0;
}

can you send me the link to your test page. – Think of – i’m participant as you are – so if you don’t like to make it public – send me an E-Mail ( everything is under my Nick or Avatar )

by the way:
to get between 768 and 989

#footer .container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
#footer .container .flex_column {
  flex: 0 1 24%;
  width: unset !important;
  margin: 0 !important;
}

@media only screen and (min-width:768px) and (max-width:989px)  {
  #footer .container .flex_column {
    flex: 0 1 48%;
  }
}

@media only screen and (max-width:767px)  {
  #footer .container .flex_column {
    flex: 1 1 100%;
  }
}

without the link it is hard to advice – but i would do it with flexbox model:
The columns inside the footer container as flex-items the container itself as display flex.
then you can shift the items with align-items : center.
see: Link

maybe it is a focus thing on your shop settings.

one big advantage is – that you can style that page with grid-row or color-sections – and because it is part of the footer ! – you can have that on pages/posts with sidebar – without sliding the sidebar under those fullwidth layout elements.
i do not know if this will work with fullwidth elements and by the hook : ava_before_footer
i tested it with a do_shortcode insertion via that hook – but it breaks the normal layout.

about your child theme: were there previously footer.php or header.php or other replacement files in the child theme folder?
If yes – then you need to update them to the latest version as well. So you should know for what reason they were there. You will then need to incorporate the changes to these files into the newer versions and upload them instead.
The footer has received some new features – and an older version of the footer.php of the child theme will not work properly.
__________________
By the way: i use borlabs cookie for a long time – and had never bigger Problems – neither on php7.4 nor on php8.
If you got some snippets in your child-theme functions.php – you had to look for:

$(window).load(function(){
// It is deprecated in php8 now and it must be used:
$(window).on('load', function(){

same with .click( … events – now on.(‘click’, …

And you realy uploaded a fontello font to your enfold?
the font is called fontello – that is what you can see on the enfold options page:

because default font-name of enfold included fonts is entypo-fontello.
if you have generated it on fontello.com all zip files will have a fontello-name – besides that you had to put in a font-name there on generating. This inserted font-name will be the one shown on that enfold-list.

in connection with Enfold I work exclusively with the Classic Editor – then of course in ALB mode.
I can’t see how the error should have looked like, but I never had problems with the Classic Editor.

sorry i’m participant as you are – so no private content for me .
i thought that you concern to the shortcode part – it is the equivalent of your layout above.

f.e.:

.responsive #top #wrap_all #av-extra-columns .entry-content-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between !important;
}

.responsive #top #wrap_all #av-extra-columns .entry-content-wrapper::before, 
.responsive #top #wrap_all #av-extra-columns .entry-content-wrapper::after {
  display: none;
}

/*** the flex-items ***/
.responsive #top #wrap_all #av-extra-columns .flex_column {
  flex: 0 1 15%;
  margin: 0px !important;
  margin-bottom: 20px !important;
  margin-left: 0px !important;
  padding: 5px;
  width: unset !important;
  background-color: rgba(255,255,255,0.4);
  box-shadow: 1px 1px 5px #aaa;
}

/*** flex-item media queries - to have on iPad that too ***/
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #av-extra-columns .flex_column {
      flex: 0 1 30%;
      width: unset !important;
  }
}

@media only screen and (max-width: 519px) {
  .responsive #top #wrap_all #av-extra-columns .flex_column {
      flex: 0 1 48%;
      width: unset !important;
  }
}

@media only screen and (max-width: 379px) {
  .responsive #top #wrap_all #av-extra-columns .flex_column {
      flex: 1 1 100%;
      width: unset !important;
  }
}

place only the columns that should be part of the flex-container (color-section) and the text-block in an extra color-section before. ( “Las lesiones por trauma …”)

btw: if you only set your custom-ID (av-extra-columns) – and remove the css you set til now
– i will optimize your flex code a bit on that. !

Sorry – i thougth he uses only the better and easier solution of Ismaels link here: https://kriesi.at/support/topic/search-box-in-overlay-search-box/#post-1320840
A combination of both solutions should be avoided.

In my solution the search input field is placed by the shortcode via menu-item – so the inputfiled gets a link functionality. Thats the reason i removed from that input field (only – by the selector ) the href.

and you realy placed the edited file here:

so on my pages it works ? …
https://webers-testseite.de/

i would create a svg ( vectorise ) of your logo – group the “wooden shoes” to a class and set them to display none on header-scrolled