Как сделать высоту контейнера по высоте текста после transform: rotate(-90deg)?

Нужно сделать секцию по высоте текста после трансформации :

<section class="video">
    <div class="video__wrapper">
        <header class="video__header">
             <div class="video__button button">
                   <div class="video__button-text button__text">
                                play
                    </div>
                    <div class="video__button-img button__img">
                         <img src="img/button/02.svg" alt="arrow">
                    </div>
                    </div>
              <h1 class="video__header-item">
                 BREGUET WATCH
             </h1>
       </header>
     </div>
</section>

    .video {
    padding: 7.5% 0 20% 0;
    background: #FFFFFF;
}
 .video__wrapper {
     max-width: 957px;
     padding: 0 15px;
     margin: 0 auto;
 }
 .video__header {
     position: relative;
 }
 .video__header-item {
    font-family: 'Archivo Black Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 172px;
    line-height: 90%;
    /* or 155px */
    text-align: center;
    text-transform: uppercase;
    color: #000000;
    background-image: url("../img/video/background.png");
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
 }
.video__button-text {
    margin-bottom: 10px;
}
.video__button {
    position: absolute;
    /* left: 204px; */
    left: 20.86%;
    /* top: 154px; */
    top: 30.51%;
}
@media (max-width:972px) {
   .video__header-item {
        transform: rotate(-90deg);
   }
   .video {
       /* height: 100%; */
       height: auto;
   }
   .video__wrapper {
        /* height: 100%; */
        height: auto;
   } 
   .finish__header {
    /* transform: rotate(-90deg); */
    /* height: 100%; */
    display: block;
    height: auto;
   }
}