<main>
<Section class="mid isolate ">
<!--   <img src=""> -->
  
  <!-- svg: first layer -->
<!-- <svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'>
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='8.05' 
      numOctaves='1' 
      stitchTiles='stitch'/>
  </filter>
  
  <rect width='100%' height='100%' filter='url(#noiseFilter)'/>
</svg> -->
  
   <div class="noise"></div>
    <div class="overlay"></div>
  
</Section>
 
<article class="down ">
<!-- <p>1234</p> -->
  
</article>
  
</main>

body{
  background-color:red;
  background: radial-gradient(circle, rgba(200,0,0,1.5898810207676821) 100%, rgba(0,212,255,1) 100%);
  height:150dvh;
}
main{
  display:flex;
  flex-direction:column;
}

.noise {
  width:100%;
  height:100%;
  
  background: conic-gradient(from 0deg at 80% -39%, rgba(0,0,255,0.63), rgba(0,0,0,0.2)),
    url(https://grainy-gradients.vercel.app/noise.svg);
  filter: contrast(170%) brightness(1000%);
}

.isolate {
  isolation: isolate;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: moccasin;
  mix-blend-mode: multiply;
}

.mid{
  position:absolute;
  inset: 4rem;

  background-image:url("https://www.healthyeating.org/images/default-source/home-0.0/nutrition-topics-2.0/general-nutrition-wellness/2-2-2-3foodgroups_fruits_detailfeature.jpg?sfvrsn=64942d53_4");
  background-repeat:no-repeat;
  background-size:cover;
  
  filter:contrast(1.7);
  mix-blend-mode: luminosity;
  isolation:isolate;
  
 
      
     
  }
}

article.down{
  display:grid;
  position:relative;
  background-color:blue;
  outline: solid black;
  translate: 0px 90px;
  
}