hm – didn’t i mention a solution before ? …

but take this instead from https://kriesi.at/support/topic/scroll-down-link/#post-1489662 – because we have choosen before this slightly rounded version :

function avia_replace_default_icons($icons){
 $icons['svg__scrolldown'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'down-open');
 $icons['svg__prev'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'left-open');
 $icons['svg__next'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'right-open');
 return $icons;
}
add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

and try :

#top .avia-post-nav {
  padding: 20px;
}

#top .avia-post-nav .label {
  position:absolute;
  top:50% !important;
  transform: translateY(-50%);
  height:48px;
  margin-top:0;
}

.avia-post-nav .label.avia-svg-icon svg:first-child {
  fill: #FFF;
  height:48px;
  width: auto;
}

btw: you can have on opend slide-out a different fill color:

#top .avia-post-nav:hover .label.avia-svg-icon svg:first-child {
  fill: #eee
}

@media only screen and (min-width: 1010px) {
  /* your rulesets here */
}

@media only screen and (min-width: 990px) and (max-width: 1009px) {
  /* your rulesets here */
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  /* your rulesets here */
}

@media only screen and (max-width: 767px) {
  /* your rulesets here */
}

It is good practice (as Enfold also does) to use even values for the min-width and odd values for the max-width.

I tried but it won’t work so i need a code for this.

– i do not see what “this” means”
you should be more precise what you like to have – ” tablet and mobile etc” tablet and mobile are not well defined as screen width.
F.e. there are so many iPad versions (
iPad mini 768×102; iPad 800×1080; iPad 11inch 834×1194; iPad 12.9inch 1024×1366 etc. )
then there are different media queries for screen orientations ( portrait or landscape)
then there are different media queries for screen resolutions to differ between Retina Displays to normal one. etc. etc. pp
for example:

@media
  screen and (min-width:600px) and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-width:600px) and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
  	/* an example rule: */
  	div {background:url( (Email address hidden if logged out) );}
}

Therefore, I would focus on a few screen widths, e.g., the 767px and 989px used by Enfold.
Incidentally, Enfold also uses various classes on the html tag that can be used to target only mobile devices (avia_mobile) or devices with touch screens (touch-device).

By the way: The link provided by Rikard leads to a more detailed page with my above-mentioned notes:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

What do you mean by ‘devices’ – there are no restrictions regarding different devices in the CSS rules above?
By the way, you should not set this for mobile devices, as it looks terrible (it is not easy to read with these settings).
f.e.:

/*Ajout de marges personnalisées dans les sections spécifiques de la page de résultats de recherche*/
@media only screen and (min-width: 768px) {
  .responsive #top.search #main .container {
    max-width: 100%;
  }

  .responsive #top.search #main .page-heading-container {
    max-width: 1310px !important;
    padding-right: 100px !important;
    padding-left: 100px !important;
  }

  .responsive #top.search #main .post-entry {
    margin-left: 100px !important;
    margin-right: 100px !important;
  }		
}

something like this:

.responsive #top.search #main .container {
  max-width: 100%;
}

.responsive #top.search #main .page-heading-container {
  max-width: 1310px !important;
  margin: 0 auto 50px;
  padding: 0 50px 50px;
}

.responsive #top.search #main .post-entry {
  margin-left: 50px;
  margin-right: 150px;
}

i can see both images on mobile ( dev tools setting ). So autoplay works on my end here
i did not check if real mobile device shows it.

choose your color-section and set for minimum height option your aspect-ratio in percent.
F.e. your image with 300/2000 means min-height 15%.
As long as your content inside your color-section does not grow bigger than the 15% height. The bg-image will react responsive, If you have set the bg-image is set to cover the background.

PS: for small screen you have to get rid of min-height option for color-sections (100px on default)

The name “masonry” actually implies the desire to fill the available space as best as possible. Depending on the settings (Flexible Masonry) , this can mean that for some screen widths, entries with large heights are better suited to a different location.

Despite the discontinuation of Sort Order the above setting, Masonry attempts to fill the entire area as well as possible.
This then leads that entries bigger in height, for example, being inserted differently after all.

If you try it with the “Perfect Grid” setting, that shouldn’t happen.

Thank goodness for DeepL — I did take French as my third subject in high school, but that was a good 40 years ago ;)

#top .ti-widget .ti-controls .ti-next,
#top .ti-widget .ti-controls .ti-next:after,
#top .ti-widget .ti-controls .ti-prev:after,
#top .ti-widget .ti-controls .ti-prev {
  background: none !important;
  border: none !important;
  outline: none !important;
}

#top .ti-widget .ti-controls .ti-next {
  right: -20px;
}

#top .ti-widget .ti-controls .ti-prev {
  left: -20px;
}

#top .ti-widget .ti-controls > div:after {
  font-size: 52px;
  color: #ebebeb;
}

#top .ti-widget .ti-controls .ti-prev:hover:after,
#top .ti-widget .ti-controls .ti-next:hover:after {
  color: #2c1175 !important;
}

maybe you have allready included some of those rules.

on inserting my code inside developer tools (copy&paste) :

there you can see both – mine and your existing jpg solution.

but where does a link like : https://storasoder.se/nojesteaterntestsida/richard-obriens-rocky-horror-show-the-legendary-rock-roll-musical/
come from – that is the link you must have set.

or a little more elegant:

#top #header:not(.header-scrolled-full) #header_main {
  box-shadow: none;
}

#header_main:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--enfold-header-height) - 150px);
  width: 100%;
  height: 200px; 
  background-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iRHJlaS1MaW5pZW4iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgODAwIDE4MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjOTQxMDA5OwogICAgICB9CgogICAgICAuc3QxIHsKICAgICAgICBmaWxsOiAjZWZhNDBiOwogICAgICB9CgogICAgICAuc3QyIHsKICAgICAgICBmaWxsOiAjMDA4MGEyOwogICAgICB9CiAgICA8L3N0eWxlPgoKICA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNNjE0Ljg4NSw2My44MzVjLTEwNS4xNzksMjUuNTMxLTI2NC44MDQsNTUuOTY1LTQyNy45NTQsNTUuOTY1LTEwMi4xMjcsMC0xNjAuOTctMTcuODkxLTE4Ni45MzEtMjguNTI5djE0Ljk5MWMyNS45NiwxMC42MzcsODQuODA0LDI4LjUyOSwxODYuOTMxLDI4LjUyOSwxNjMuMTUsMCwzMjIuNzc1LTMwLjQzNCw0MjcuOTU0LTU1Ljk2NSw5NS42MjYtMjMuMjEyLDE2NC43ODItNDYuNjc5LDE4NS4xMTUtNTMuODM1di0xNC45OTFjLTIwLjMzMyw3LjE1NS04OS40ODksMzAuNjIyLTE4NS4xMTUsNTMuODM1WiIvPgogIDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik02MTQuODg1LDc4LjgyNWMtMTA1LjE3OSwyNS41MzEtMjY0LjgwNCw1NS45NjUtNDI3Ljk1NCw1NS45NjUtMTAyLjEyNywwLTE2MC45Ny0xNy44OTEtMTg2LjkzMS0yOC41Mjl2MTQuOTljMjUuOTYsMTAuNjM3LDg0LjgwNCwyOC41MjksMTg2LjkzMSwyOC41MjksMTYzLjE1LDAsMzIyLjc3NS0zMC40MzQsNDI3Ljk1NC01NS45NjUsOTUuNjI2LTIzLjIxMiwxNjQuNzgyLTQ2LjY3OSwxODUuMTE1LTUzLjgzNXYtMTQuOTljLTIwLjMzMyw3LjE1NS04OS40ODksMzAuNjIyLTE4NS4xMTUsNTMuODM1WiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04MDAsMzkuOTgxYy0yMC4zMzMsNy4xNTUtODkuNDg5LDMwLjYyMi0xODUuMTE1LDUzLjgzNS0xMDUuMTc5LDI1LjUzMS0yNjQuODA0LDU1Ljk2NS00MjcuOTU0LDU1Ljk2NS0xMDIuMTI3LDAtMTYwLjk3LTE3Ljg5MS0xODYuOTMxLTI4LjUyOXYxNy4zMjZjMzAuMDc1LDExLjQ0Miw4OS4yMjgsMjcuMjAyLDE4Ni45MzEsMjcuMjAyLDE2NC44MjUsMCwzMjUuODg0LTMwLjcxMiw0MzEuOTcyLTU2LjQ3Niw4OS4wNC0yMS42MjQsMTU1LjM3LTQzLjQ5MiwxODEuMDk4LTUyLjM4MXYtMTYuOTQzWiIvPgo8L3N2Zz4=");
  background-size: 100% 100%;
  transition: opacity 1s ease-in-out;
}

#top #header.header-scrolled #header_main:before {
  opacity: 0;
}

svg with more convex look.

you have choosen for the #av_section_1 a z-index of : 200
so the z-index of the flex_columns had to be bigger. (300) next – hint
do not forget to give the outer flex_columns a background-color of #172738

so if you only like to link if there are biljetservice links on the images above the titles – then take snippet two from this link

Since my backend is in German, I always have to double-check how the elements are named in English.