/* Adicione estas regras no final do seu CSS para criar media queries */
@media screen and (max-width: 860px) {

    .principal {
        flex-direction: column;
        width: 100%;
    }

    .principal__login {
        width: 100%;
    }

    .principal__img {
        width: 100%;
    }

    #backgroundImage {
        width: 100%;
    }

    .principal__login__container__cadastro {
        margin-bottom: 1.25rem !important;
    }

    #backgroundImage {
        margin: 0rem;
        bottom:0;
    }

    .footer {
        display: none !important;
    }
}

@media screen and (max-width: 500px) {
    :root {
        font-size: 90%;
    }
}

@media screen and (max-width: 450px) {
    :root {
        font-size: 80%;
    }

    .cabecalho__filtro {
        display: none;
    }
}