<header class="wrapper">
  <div class="bg-img"></div>
  <h1 data-text="Flower shower">Flower shower</h1>
</header>

*{
  box-sizing: border-box;
}
body{
  background: #a0769e;
  padding: 22px;
}
.wrapper{
  font-family: 'Poppins', sans-serif
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  height: auto;
  min-height: calc(100vh - 60px);
  padding: 6rem;
  background: #efdfed;
  border: 4px dotted #a0769e;
  
}
.bg-img{
  -ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
  grid-area: 1/1/2/2;
  background: url(https://1.bp.blogspot.com/-2s7vnf178qA/XZmCjBLjKSI/AAAAAAAAJR0/H08_quee-GYE5h5LWSSZubXMic8aSa4DgCLcBGAsYHQ/s2160/sakura-tree-mobile-wallpaper.jpg);
  background-size: cover;
  -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
  border-radius: 15px;
}
h1{
  -ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
  grid-area: 1/1/-1/-1;
  text-align: center; background:url(https://1.bp.blogspot.com/-2s7vnf178qA/XZmCjBLjKSI/AAAAAAAAJR0/H08_quee-GYE5h5LWSSZubXMic8aSa4DgCLcBGAsYHQ/s2160/sakura-tree-mobile-wallpaper.jpg);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: cover;
  background-position: 200% 59%;
  color: transparent;
  position: relative;
  align-self: center;
  margin: 0;
  font-family: 'Modak';
  font-weight: 500;
  line-height: 9rem;

}
h1::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  -webkit-clip-path: polygon(48.25% -28px, 52.37% 120.47%, 3.05% 130.06%, -13px -24.7%, 35.46% -30.24%);
  clip-path: polygon(48.25% -28px, 52.37% 120.47%, 3.05% 130.06%, -13px -24.7%, 35.46% -30.24%);
  color: white;
  text-shadow: 0px 0px 12px #a53569;

}

@media screen and (min-width: 1000px){
  .wrapper{
    width: 900px;
    margin: auto;
  }
   h1{
  font-size: 9rem;
  }
}

@media screen and (max-width: 999px) and (min-width: 769px){
  h1{
    font-size: 8rem;
    line-height: 6rem;
  }
}
@media screen and (max-width: 768px){
  .wrapper{
    padding: 5rem 3rem;
  }
  h1{
  font-size: 6rem;
    line-height: 4rem;
  }
}


@media screen and (max-width: 600px){
  .wrapper{
    padding: 5rem 2rem;
  }
  h1{
  font-size: 5rem;
   
  }
}