How to align items or align self with big text using CSS GRID

I have tried for several hours without success...

My goal is to be able to align a large text (main title) by sticking it to the bottom line of my grid cell.

I tried baseline, and flex end with align items on the container and align self on the child without success. Also, some related things seen online about line height and vertical-align...whitout success

Do you have any idea what I am doing wrong?

enter image description here

.banner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(7, 1fr);
    background-color: rgb(255, 255, 255);
    height: 120vh;
    
}

.title{
    font-size: 6.3rem;
    font-family: 'Times New Roman', Times, serif;
    text-transform: uppercase;
    color: rgb(31, 89, 148);
    font-weight: bold;
    grid-area: 4/3/5/5;
    align-self: baseline;

   
}

<body class="container">
    <!--///////////////////////////////// début header//////////////////////////// -->
    <header class="banner">
        <h1 class="title">front pri</h1>
    </header>

</body>

</html>

Solution

You have default margin on your h1. Adding margin-bottom: 0; to your h1 should do the trick.