Problem with responsiveness - Text in Hero-image

Question

I Need Help. I want to create a hero-image, but I'm having trouble positioning the text. I want it to look like this: enter image description here

When I do it my way, then I have a problem with RWD positioning later. Maybe it is possible to do it somehow simpler?

  <header>
          <div class="hero-img">
              <div class="hero-shadow"></div>
              <div class="hero-text">
                  <h1>Zięba</h1>
                  <p>gallery</p>
                </div>
                <i class="fas fa-chevron-down"></i>
      </header>

header {
.hero-img {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-image: url('../img/Kapiaca-sie-small.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    z-index: -2;
    overflow: hidden;

    .fa-chevron-down {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 95%;
        color: $white-color;
        font-size: 35px;
    }
}

.hero-text {
    position: absolute;
    transform: translate(1430px, -50px);
    height: 100%;
    z-index: 5;

    h1 {
        color: $black-color;
        font-size: 30rem;
        font-family: 'Disclaimer', sans-serif;
    }

    h1::before {
        content: 'Sławomir';
        position: absolute;
        display: inline-block;
        transform: rotate(270deg);
        top: 312px;
        right: 180px;
        font-size: 5rem;
        font-family: 'Roboto', sans-serif;
        color: $green-color;
    }

    p { position: absolute;
        top: 540px;
        right: 10px;
        text-transform: uppercase;
        color: $brown-color;
        font-size: 1.6rem;
    }
}

I am sending link to CodePen:https://codepen.io/Ewelaa/pen/MWoVwvY

Answer 1

header .hero-text {
  position: absolute;
  right:40px;
  height: 100%;
  z-index: 5;
}  

Just use Right Property to fix position.