I have following HTML code:
<!-- Media Section -->
        <section id="media" class="media section">

            <div class="container content">
                <div class="row justify-content-center" data-aos="fade-up">
                    <div class="col-12 text-center mb-3">
                        <h2>Media Coverage</h2>
                    </div>
                </div>
                <div class="row g-0" data-masonry='{"percentPosition": true }'>
                    <div class="col-md-6 col-lg-4 cutting" data-aos="fade-up">
                        <a href="assets/img/mediacoverage/1.jpg" class="glightbox preview-link">
                            <img class="img-fluid" src="assets/img/mediacoverage/1.jpg" alt="">
                        </a>
                    </div>
                    <div class="col-md-6 col-lg-4 cutting" data-aos="fade-up">
                        <a href="assets/img/mediacoverage/2.jpg" class="glightbox preview-link">
                            <img class="img-fluid" src="assets/img/mediacoverage/2.jpg" alt="">
                        </a>
                    </div>
                    <div class="col-md-6 col-lg-4 cutting" data-aos="fade-up">
                        <a href="assets/img/mediacoverage/3.jpg" class="glightbox preview-link">
                            <img class="img-fluid" src="assets/img/mediacoverage/3.jpg" alt="">
                        </a>
                    </div>
                    <div class="col-md-6 col-lg-4 cutting" data-aos="fade-up">
                        <a href="assets/img/mediacoverage/4.jpg" class="glightbox preview-link">
                            <img class="img-fluid" src="assets/img/mediacoverage/4.jpg" alt="">
                        </a>
                    </div>
                    <div class="col-md-6 col-lg-4 cutting" data-aos="fade-up">
                        <a href="assets/img/mediacoverage/5.jpg" class="glightbox preview-link">
                            <img class="img-fluid" src="assets/img/mediacoverage/5.jpg" alt="">
                        </a>
                    </div>
                </div>
            </div>

            <div class="container-fluid show-more">
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <button id="show-more-media" class="btn btn-show-more">Show More</button>
                    </div>
                </div>
            </div>
        </section><!-- /Media Section -->

I have following CSS:
/*--------------------------------------------------------------
# Media Section
--------------------------------------------------------------*/
.media .cutting {
    position: relative;
}

.media .cutting::before {
    content: '\f62c';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    transition: 0.3s all ease-in-out;
    pointer-events: none;
    color: #ffffff;
    display: flex;
    font-family: "bootstrap-icons" !important;
    font-size: 0;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.media .cutting:hover:before {
    font-size: 2rem;
    background: rgba(0, 0, 0, 0.35);
}

.media .content {
    height: 350px;
    overflow: hidden;
    position: relative;
    z-index: 99;
}

.media .content.all {
    height: 100%;
    overflow: initial;
}

.media .show-more {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 100%);
    margin-top: -2em;
    padding-top: 3em;
    padding-bottom: 1em;
    position: relative;
    z-index: 100;
}

.media .btn-show-more {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 8em;
    padding: 0.5em 2em;
    border: 2px solid transparent;
    transition: 0.3s all ease-in-out;
    font-size: 1.2em;
    font-weight: 700;
}
.media .btn-show-more:hover {
    border-color: var(--accent-color);
    background-color: transparent;
    color: var(--accent-color);
}

And I have following JavaScript:
/**
     * Media coverage reveal more
     */
    const mediaCoverage = document.querySelector('#media .content');
    const showAllMediaBtn = document.querySelector('#show-more-media');
    if (showAllMediaBtn) {
        showAllMediaBtn.addEventListener('click', (e) => {
            e.preventDefault();
            if (mediaCoverage.classList.contains('all')) {
                mediaCoverage.classList.remove('all');
                showAllMediaBtn.innerHTML = 'Show More';
            } else {
                mediaCoverage.classList.add('all');
                showAllMediaBtn.innerHTML = 'Show Less';
                showAllMediaBtn.classList.add('mt-5');
            }
        });
    }

Right now showAllMediaBtn is working perfectly, but what I want is mediaCoverage should increase its height gradually. I want animation in reveling all.