.section--hero{
  padding: 200px 100px;
  background-size: cover;
  background-position: right bottom;
  margin-bottom: 140px;
  position: relative;
}
.section--hero .inner-content{
  width: 50%;
}
.section--hero::before{
  content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(255 255 255);
    background: linear-gradient(270deg, rgb(0 0 0 / 0%) 0%, rgb(255 255 255) 160%, rgb(0 0 0 / 0%) 100%);
}

@media only screen and (max-width: 480px){
  .section--hero .inner-content{
    width: 100%;
  }
  .section--hero{
    padding: 40px !important;
    background-position: center;
    margin-bottom: 60px;
  }
  .section--hero::before{
    background: linear-gradient(270deg, rgb(0 0 0 / 0%) 0%, rgb(255 255 255) 100%, rgb(0 0 0 / 0%) 100%);
  }
}


@media only screen and (min-width: 481px) and (max-width: 768px){
  .section--hero .inner-content{
    width: 80%;
  }
  .section--hero{
    padding: 60px !important;
    background-position: center;
    margin-bottom: 60px;
  }
  .section--hero::before{
    background: linear-gradient(270deg, rgb(0 0 0 / 0%) 0%, rgb(255 255 255) 100%, rgb(0 0 0 / 0%) 100%);
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .section--hero {
    padding: 70px;
  }
   .section--hero .inner-content{
    width: 50%;
  }
  .section--hero::before{
    background: linear-gradient(270deg, rgb(255 255 255 / 28%) 0%, rgb(255 255 255) 160%, rgb(0 0 0 / 0%) 100%);
  }
}