see here an example page with different scenarios.
on the centered flipbox there is backside first ! so you can see what the height of the flipbox determines ( if you have not choosen a min-height on the options).
See on the last flipbox – what happens if you have a big original image inserted – but with no-repeat – no stretch.

https://webers-testseite.de/gridflip/

btw: using variable fonts can be very interesting – but there are a lot of new css declarations to know – see here a playground:
https://variablefonts.io/about-variable-fonts/

Wenn du also doch lieber mit einem selbstgehosteten OpenSans arbeiten möchtest. Dann sag bescheid – welche Schriftschnitte du brauchst, dann lade ich das file auch hoch.

PPS: übrigens OpenSans ist ja noch harmlos, RobotoFlex ist ein Super Variabler Font mit mehreren Axen die bedient werden können:

Firefox (Developer Version) hat für Schriftarten einen eigenen Reiter, an dem man herumspielen kann mit diesen Einstellungen. Wenn man dann mit dem Resultat zufrieden ist, geht man zurück zum Regelsatz, und kann sich das als css heraus kopieren:
(das Element für das du dann rumgespielt hast, muss dann noch durch den eigentlichen Selektor ersetzt werden)

Element {
  font-size: 140px;
  line-height: 1.1em;
  letter-spacing: 5px;
  font-weight: 612;
  font-stretch: 113%;
  font-variation-settings: "opsz" 8, "GRAD" 87;
  font-style: oblique 7.45deg;
}

Something like that makes me sad, when a solution is presented and there is no response since the question was posted.

Mailer: Other SMTP
SMTP Error: data not accepted.SMTP server error: DATA END command failed Detail: Spam message rejected
SMTP code: 554 Additional SMTP info: 5.7.1

______

i use smtp mail very often – and if your settings are ok. there are no errors at all.
As mentioned above – check your DNS settings of the concerning Domain.

see here : Listpoints 3,4,5,6
https://www.courier.com/error-solutions/smtp-error-554

Whether an email is considered spam or not depends on the recipient. If the SPF record is missing, some recipients will accept it, while others will immediately classify it as spam. The same applies to DMARC1.

maybe this is helpful – use your idea of grid-row.
my page setting is 1510px – so half width is 755px ( that is the value you see on that example page )
(there has to be the same padding left/right as section container) see comment in code. – If you break the cells at 989px than media query had to be adjusted.

https://webers-testseite.de/marcus/

we do not need to edit the section.php
maybe it is enough to have a child-theme footer.php to have no main tags inside the page that is the footer-page.

find:

$content = Avia_Builder()->compile_post_content( $post );

after that line add :

// NEW: Remove <main> tags AND the role="main" attribute from the compiled content of the footer page
// Step 1: Replace opening <main> tag (with any attributes) with <div and preserve attributes, but remove role="main"
// This regex specifically targets 'role="main"' within the attributes and removes it.
$content = preg_replace('/<main([^>]*)role="main"([^>]*)>/is', '<div$1$2>', $content);

// Step 1b (Fallback): If role="main" was not present, or if it's the only attribute,
// simply replace <main...> with <div...>
// This ensures that if the main tag didn't have role="main", it still gets converted to div
$content = preg_replace('/<main([^>]*)>/is', '<div$1>', $content);

// Step 2: Replace closing </main> tag with </div>
$content = str_replace('</main>', '</div>', $content);

it will replace the main tag with div tag – and removes the role=”main”
use that edited footer.php inside your child-theme root directory.

__________

shortform without the comments:

$content = preg_replace('/<main([^>]*)role="main"([^>]*)>/is', '<div$1$2>', $content);
$content = preg_replace('/<main([^>]*)>/is', '<div$1>', $content);
$content = str_replace('</main>', '</div>', $content);

Enfold uses that main sometimes in a bit different way : as id=”main” and with role=”main”
if there is a main tag – enfold sets it to role=”main”
see here some thought to it. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/main_role
But as with the main tag, the main role should only be used once in the document!

Edit: yes – now i see that on using a page as footer – there is another main tag. …

Damit du das Logo größer bekommst, solltest du das png nicht mit soviel Freiraum ausstatten:
Wenn du es so anlegst, dann wird es schon klappen:
https://i.postimg.cc/cLBm3N8R/Bildschirmfoto-2025-07-16-um-13-28-59.jpg

what kind of form is it? If you are using contact form 7 you can listen to wpcf7mailsent and after a time you can close the popup with it.
maybe your form got something similar.

for example you can close a magnificPopup by adding this to your popup function:

	document.addEventListener( 'wpcf7mailsent', function( event ) {
		setTimeout(function() {
			$.magnificPopup.close();
		}, 1000);
	}, false );

The place where you can insert the favicon to enfold options – there is a comment on the right side:

Specify a favicon for your site.
Accepted formats: .ico, .png, .gif

if you follow that link ( that two cards icon) you will see the browsersupport.
on the bottom :

so: better do not use svg as favicon!
if you like to use svg have a fallback solution: https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/

and you inserted that video with code-block element as described.
Please send me the link to your page. ( contact under my avatar )

___________

Solution for color-section and background-video:

First – you had to know what aspect ratio is your selfhosted video!
you had to insert this to the color-section when you fill out the elements options:

in most cases it will be a 16/9 video aspect ratio. – if not you can insert there a different value.

then have a look to: https://webers-testseite.de/html5-video-ben/

See what happens – when i switch off these height / min-heigt settings in dev-tools :

btw. i optimized those rules a little – and you do not need to shrink the menu items font-size – because it breaks to burger menu earlier.

So : better remove all the code from above – and insert instead:

#top #header .av-main-nav > li > a {
  font-size: 16px !important;
  padding: 0 12px !important;
}

@media only screen and (min-width: 1430px) {
  #header #header_main {
    width: 1430px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 990px) {
  #header #header_main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  #header #header_main > * {
    flex: 1 1 auto;
    align-self: center;
    width: unset;
  }
  #header #header_main .av-logo-container {
    flex-basis: calc(100% - 170px);
    flex-grow: 1;
    order: 1;
    max-width: unset;
  }
  #header #header_main .widget {
    margin-right: 50px;
    flex-grow: 0;
    flex-basis: 120px !important;
    order: 2;
    display: flex;
    justify-content: center;
  }
  #header #header_main #header_main_alternate {
    flex-basis: 100%;
    order: 3;
    border-top: none;
  }
}

@media only screen and (max-width: 989px) {
  #header #header_main {
    display: flex;
    flex-flow: wrap column-reverse;
  }
  #header #header_main .widget {
    margin-top: 0px;
    padding: 10px 0 !important;
  }
   #header_main .av-logo-container {
    height: 150px !important;
  }
  #header_main .inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150px;
  }
  #header_main .inner-container > * {
    align-self: center;
  }

  #header_main .inner-container .main_menu {
    display: flex !important;
    align-items: center;
  }
  #header_main .inner-container .avia-standard-logo {
    width: 215px
  }
  #header_main .inner-container .main_menu .social_bookmarks  {
    top: 0;
    margin-top: 0 !important;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .main_menu {
    position: relative !important;
  }
}

and after doing that – try:

@media only screen and (max-width: 479px) {
  .html_header_transparency #top .avia-builder-el-0 .container, 
  .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 25px;
  }
  @media only screen and (max-width: 476px) {
    #top .avia-caption-content {
      display: none!important
    }
  }
}

my solution – a little adjust of css from ismael – but easiest way is to remove it – and remove please the rule:

#header_main .widget {
  display: flex;
  align-items: center;
  margin-left: 85%;
  margin-top: 2%;
  position: absolute;
}

now try:

@media only screen and (min-width: 1430px) {
  #header #header_main {
    width: 1430px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 990px) {
  #header #header_main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  #header #header_main > * {
    flex: 1 1 auto;
    align-self: center;
    width: unset;
  }
  #header #header_main .av-logo-container {
    flex-basis: calc(100% - 170px);
    flex-grow: 1;
    order: 1;
    max-width: unset;
  }
  #header #header_main .widget {
    margin-right: 50px;
    flex-grow: 0;
    flex-basis: 120px !important;
    order: 2;
    display: flex;
    justify-content: center;
  }
  #header #header_main #header_main_alternate {
    flex-basis: 100%;
    order: 3;
    border-top: none;
  }
}

@media only screen and (max-width: 989px) {
  #header #header_main {
    display: flex;
    flex-flow: wrap column-reverse;
  }
  #header #header_main .widget {
    margin-top: 0px;
    padding: 10px 0 !important;
  }
}

sadly we loose with this the border-top of #header_main_alternate – or you can live with it that the border-top does not have the full screen-width.
then remove that border-top: none line.