Le agregue un hover a mi boton pero este efecto no se observa en la version mobile ¿alguien sabe el motivo? ya modifique la altura del gr...

Le agregue un hover a mi boton pero este efecto no se observa en la version mobile ¿alguien sabe el motivo? ya modifique la altura del grid en su contenedor, inspeccionando el elemento observe que quedaba muy justo y al momento de escalar no habia espacio pero sigo sin llegar al resultado que deseo

<main class="home-main">
        <section>
            <p class="home-main-text">Conoce las novedades y noticias del mundo Tech</p>
            <button class="home-main-button">
                <a href="blogs.html">¡Entra ya!</a>
            </button>
        </section>
    </main>

.home-main {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    height: 100%;
    background-image: url('../assets/img/Cover.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.home-main section {
    display: grid;
    grid-column: 2;
    justify-items: center;
    height: 500px;
    align-items: center;
    color: aliceblue;
    margin-top: 80px;
}

.home-main-text {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 10px;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
}

.home-main-button {
    width: 110px;
    height: 50px;
    background-color: #47cfac;
    border-radius: 4px;
    border: none;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}

.home-main-button:hover {
    background-color: #4ddfba;
    transform: scale(1.1);
}

.home-main-button a {
    font-size: 18px;
    font-weight: 700;
}

![](