Do all images got Titles or Descriptions too? – and do they differ from Alt Text?
My question is that there might be a method to generate the alt text from one of the others.

please insert this to your child-theme functions.php:
(maybe a mod knows a shorter way)

function replace_one_specific_color(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
(function($) {     

	function colorReplace(findHexColor, replaceWith) {
	  // Convert rgb color strings to hex
	  // REF: https://stackoverflow.com/a/3627747/1938889
	  function rgb2hex(rgb) {
	    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
	    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
	    function hex(x) {
	      return ("0" + parseInt(x).toString(16)).slice(-2);
	    }
	    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
	  }

	  // Select and run a map function on every tag
	  $('.flex_column, .avia-button').map(function(i, el) {
	    // Get the computed styles of each tag
	    var styles = window.getComputedStyle(el);

	    // Go through each computed style and search for "color"
	    Object.keys(styles).reduce(function(acc, k) {
	      var name = styles[k];
	      var value = styles.getPropertyValue(name);
	      if (value !== null && name.indexOf("color") >= 0) {
	        // Convert the rgb color to hex and compare with the target color
	        if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
	          // Replace the color on this found color attribute
	          $(el).css(name, replaceWith);
	        }
	      }
	    });
	  });
	}
	// Call like this for each color attribute you want to replace
	colorReplace("#ea675b", "#0000DD");

})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'replace_one_specific_color');

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 )