Bootstrap 5 Vertical Alignment issue with responsive

I have a issue with vertical alignment in a container. I have the following code that does what I want, that is, the first row in the center and the second at the bottom of the container.

Full screen

<header class="masthead" id="home">
        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-evenly text-center">
                <div class="col-4">
                    <img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="...">
                    <hr class="divider" />
                    <h1 class="text-white font-weight-bold">d3vyce</h1>
                </div>
                <div class="col-md-8 col-lg-4">
                    <h2 class="text-white font-weight-bold">Hi , Welcome to my Site!</h2>
                    <p class="text-white">Developer, CTF Player, Homelab, 3D Printing</p>
                    <hr class="divider" />
                    <div class="d-grid col-6 mx-auto">
                        <a class="btn btn-outline-light btn-lg" href="https://blog.d3vyce.fr" target="_blank"><i class="fa fa-bookmark fa-lg"></i>&nbsp;&nbsp;&nbsp;&nbsp;Blog</a>
                        <a class="btn mt-2 btn-outline-light btn-lg" href="https://github.com/d3vyce" target="_blank"><i class="fa fa-github fa-lg"></i>&nbsp;&nbsp;&nbsp;&nbsp;Github</a>
                    </div>
                </div>
            </div>
            <div class="row head-row justify-content-center">
                <div class="col-12 mouse_scroll p-0">
                        <a href="#about">
                            <div class="mouse">
                                <div class="wheel"></div>
                            </div>
                            <div>
                                <span class="m_scroll_arrows unu"></span>
                                <span class="m_scroll_arrows doi"></span>
                                <span class="m_scroll_arrows trei"></span>
                            </div>
                        </a>
                </div>
            </div>
        </div>
    </header>

For the alignment at the bottom of the second row I use the following CSS:

  .mouse_scroll {
  display: block;
  width: 24px;
  height: 100px;
  position: absolute;
  bottom: 0;  }

The problem happens with the responsive. The columns of the first row are well one on top of the other, but the space between the two is much too important and I can't modify it :( I tried to search on stackoverflow for answers, but after many tests I'm in a dead end...

Reponsive

Thank you in advance for your answers!