ok – you can try first the last tip.
Then i will have a look if we can address it by attribute selector.

you are talking about the background-color of that flex_column

this does not come from a theme setting – it is set inside the column itself. You can open that column element in the editor mode and change the background-color.

I do not recommend addressing all flex_columns with a global CSS code.

What do you mean by:

All the “.” and capitals were in the right place.

What did you enter to the alt input field f.e.?

You can see at the bottom that I have used the backcolor: #ea675b

i do not see your setting – i can see that on socket – there is the color: #081f5e
which is then saved from enfold as: –enfold-socket-color-bg

have a look at: general styling – socket – Socket Background Color

you are not talking about the blog Element of Enfold?
even a conditional logic is present to show post if the got one of those categories or only if they have all of them.

The first color-section : got custom class: bg-fixed
this color-section got the one background-image: substrato_background_page_top – but set it to scroll (background-attachment)
this is for quick css ( maybe we had to adjust later on – please activate that example page again):

.bg-fixed {
  background-size: 0px !important;
  overflow: hidden;
  position: relative;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.bg-fixed:before {
  background-image: inherit !important;
  background-repeat: inherit !important;
  background-size: cover;
  background-position: inherit;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1 !important;
  pointer-events: none;
}

Now for the following color-section ( just for that bg-image) with the substrato_separatore.png – that image is 265px heigh –
On Layout Tab : set section height to “Miniumum custom height in px ” to 265px
Open “Margin and Padding” Tab : check “Custom Margins” and enter -260px (Top and Bottom) – this will shift the section to top.
On Styling Tab – “Custom Background Color” and set the slider on the right to minimum (0.01) that is defacto : transparent
Background Image – now your separator – set to scroll – Bottom Center and repeat-x
on Advanced Tab : set a higher z-Index e.g. 2 – and give (if needed) a custom class to that section f.e. shifted-bg

If you got this we will look what to adjust then.
maybe this might be necessary:

#top .bg-fixed ,
#top .shifted-bg {
  position: relative;
}

First: See here a quick takeover of your logo as svg separators – these are set as patterns, so they are not responsive – but fill the entire width with this pattern unit. On element (color section – or column) you can set a height for them. And of course the fill color.

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

Second: have a look at this: https://webers-testseite.de/donkey/
The problem with background-attachment: fixed is that a lot of mobile devices do not support it well. So Enfold decided to switch for mobile devices to background-attachment : scroll.

One trick was to use the background-attachment: scroll from the beginning setup. We can make then a pseudo-container (before or after anyway) that inherited background-image. Because it is now a seperated container we can set it to position : fixed
We then add a clip path to the actual color section so that the inheriting pseudo-container is only displayed below the parent section.
This is well supported by all browsers and mobile devices. etc. – follow the link above.

All is ruled by a custom class for the color-section.

PS: that post is from 2020 – so it might be that inset (0 0 0 0) works now on all browsers for the clip-path. That is much easier to understand and to write down in css code.

But: it will be hard to style with two background-images … i’m afraid we’ll have to go back to your previous solution.

Have a look if this could be a working solution for you – then i will start to explain how:
https://webers-testseite.de/substrato/

why is that doubled on that blog page?
what do you mean by: “Only if I enter their urls completely”

try:

#top.home #av-layout-grid-1 fieldset {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 20px;
}

#top.home #av-layout-grid-1 fieldset p {
  width: unset;
}

#top.home #av-layout-grid-1 fieldset p:first-of-type {
  width: 50%
}

#top.home #av-layout-grid-1 fieldset p:first-of-type input {
  border: 1px solid #be363c;
}

is this an option for that special button:

#top.home #av-layout-grid-1 fieldset p .button{
  border-radius: 0 26px 26px 0
}

It would be much easier to give advice if we could see the page it concerns. If there is a link in the private content, you will have to wait for the mods.

and if you realy like to have that noscript inside body tag use instead:

function ava_google_tag_custom_script() { 
?>
<!-- Google Tag Manager -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');
</script>
<!-- End Google Tag Manager -->  
<?php
}
add_action('wp_head', 'ava_google_tag_custom_script');

/*** Google Tag Manager Body Script *****/
function google_tag_manager_body_code() { 
?>
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
  <!-- End Google Tag Manager (noscript) --> 
<?php
}
add_action( 'ava_after_body_opening_tag', 'google_tag_manager_body_code');

read here – replace your tag manager ID : https://kriesi.at/support/topic/adding-google-tag-manager-in-enfold/#post-1473587

thats nice – and if we set those “buttons” to display : none. – we can make a light box from that masonry to show first the images – with a button link in the bottom bar:

see: https://webers-testseite.de/portfolio-raster/

the trick is in the magnific popup script inside callback :

elementParse: function(item) {
	var bgImage = item.el.find('.av-masonry-image-container').css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
	item.src = bgImage;
},

that i look for the background-image of that image container – and get the url – and declare it to the item to open in lightbox.
because by that snippet of ismael – there is now additional info on the masonry item – this href i use for an avia button in the lightbox (just a little bit upgraded by some custom css )

Better you insert on logo input field the original size! – or at least a file that has a min height of 90px (your header starts at 88px height)
in this case ( your logo goes right to the outer borders of the png ) only a littel padding is needed:

.logo a img {
  padding: 2% 0;
}

i guess it is because you have inserted a recalculated format (300px x 50px) that is not bigger than the min-height of your setting.
If you put in a logo img that has a height of 100px – it will be o.k. from the beginning.

then you do not have to use this:

.logo a img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 0 
}

put this to your quick css – if you do not like to set custom classes or remove min-height option etc.
i address them by different selectors.
You can decide when the columns will break on change of that 900px / 899px values

@media only screen and (min-width: 900px) {
  #top.home #av_section_1 .entry-content-wrapper {
    display: grid !important;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 899px) {
  #top.home #av_section_1  .entry-content-wrapper {
    grid-template-columns: 1fr;
  }
}

#top.home #av_section_1  .entry-content-wrapper:before,
#top.home #av_section_1  .entry-content-wrapper:after {
  display: none;
}

#top.home #av_section_1  .container {
  height: unset !important;
}

#top.home #av_section_1  .entry-content-wrapper .flex_column {
  width: unset !important;
  min-height: unset !important;
}

#top.home #av_section_1  .entry-content-wrapper .flex_column:nth-of-type(2) {
  align-self:  end;
  margin: 30px 0 0 !important;
}

#top.home #av_section_1  .entry-content-wrapper .flex_column:nth-of-type(1){
  align-self: start;
}

#top.home #av_section_1 .content {
  padding: 0 !important;
}