<div class="wrap">
  <div class="box"></div>
  <div class="map"></div>
</div>
.wrap{
 position:relative;
  padding:100px 0 0 0;
}
.box{
  position:relative;
  z-index:1;
      box-shadow: 0 4px 24px rgb(0 0 0 / 12%);
   background: linear-gradient(121.06deg, #ff0000 8.22%, #008fff 87.36%);
  width:100%;
  height:400px;
}
.map{
  background-color:#ffc478;
  width:80%;
  height:700px;
  margin:-100px auto;
  z-index:0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.