Текст в изображении-герое

Question

Мне нужна помощь. Я хочу создать изображение-герой, но не могу расположить текст. Я хочу, чтобы это выглядело так:введите описание изображения здесь

Когда я поступаю по-своему, то позже у меня возникают проблемы с задним позиционированием. Может, можно как-нибудь попроще?

        <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;
    }
}

Отправляю ссылку на CodePen: https://codepen.io/Ewelaa/pen/MWoVwvY

Answer 1

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

Просто используйте свойство Right, чтобы зафиксировать положение.