Overlay horizontal text over bootstrap5 grid

Question

Working on my website, thought myself Boostrap5 and super happy about the outcome so far, but I want that the name appears vertically on hover over the images on the bottom left, but I am not sure where I am going wrong in my code. The text is placed very low and to the edge of the grid column.

I'm sure I'm going wrong with the position: attribute or something.

.theteam img {
  cursor: pointer;
}

.theteam img:hover {
  opacity: 0.8;
}

.project {
  position: relative;
  overflow: hidden;
}

.project .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  transition: all 0.4s ease;
  opacity: 0;
}

.project img {
  transition: all 0.4s ease;
}

.project:hover .overlay {
  opacity: 1;
}

.project:hover img {
  transform: scale(1.1);
}

.text-vertical {
  transform-origin: 0 0;
  transform: rotate(90deg);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section id="about" class="about bg-dark p-5">
  <div class="container text-center mt-5">
    <h4 class="text-light text-capitalize mb-0">The rocking team</h4>
    <img src="https://poyo-pat-333.netlify.app/images/underline.png" alt="______"></span>
  </div>

  <div class="container theteam mt-5">
    <div class="row g-4 text-center">
      <div class="col-md-3 col-sm-6 project inline-block overlay">
        <img src="https://poyo-pat-333.netlify.app/images/poyo_moya.jpg" alt="team">
        <div class="text-center">
          <h6 class="text-white text-vertical position-absolute">Poyo Moya</h6>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/regi-villardell.jpg" alt="team">
        <div>
          <div>
            <h6 class="text-white text-vertical">Regi Vilardell</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/oriol_fontanals.jpg" alt="team">
        <div>
          <div>
            <h6 class="text-white text-vertical">Oriol Fontanals</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/Patrick_obrien.jpg" alt="team">
        <div class="">
          <div>
            <h6 class="text-white text-vertical">Patrick O'Brien</h6>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>

Thanks.