responsive.css

@media screen and (max-width:1200px){
    :root{
        --tamano-letra-principal: 30px;
    }
}

@media screen and (max-width:992px){
    :root{
        --tamano-letra-principal: 28px;
    }
    .contedido-principal{
        grid-template-columns: 50% 1fr;
    }
    .texto, .resultado{
        font-size: 0.8em;
    }
}

@media screen and (max-width:768px){
    :root{
        --tamano-letra-principal: 26px;
    }
    .contenedor-principal{
        grid-template-columns: 1fr;
    }
    .contenedor-mensaje{
        width: 80%;
        margin: 0 auto;
    }
    .imagen{
        display: none;
    }
    .contenedor-mensaje{
        height: auto;
    }

    .boton{
        grid-gap: 20px 0px;
    }
    .contenedor-mensaje .button{
        margin: 2rem auto 0.5rem;
    }
    footer{
        padding-top: 15px;
    }
}

@media screen and (max-width:375px){
    :root{
        --tamano-letra-principal: 20px;
    }
    .boton{
        grid-template-columns: 1fr;
    }
    .texto, .resultado{
        height: 200px;
    }
}