.content--login{
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
    /*gap: 1.5vw;*/

    padding: 5vw 15vw;
}
.principal{
    grid-column: 1 / span 2;
}
.mascote{
    width: 80%;
    grid-column: 1 / span 2;
}
.login{
    background: var(--dark-blue);
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 1.5vw 2.5vw;

    box-sizing: border-box;

    grid-column: 1 / span 2;
}
.login__title{
    font-size: calc(14px + (46 - 14) * ((100vw - 320px) / (1080 - 320)));

    line-height: unset;

    text-align: center;
}
.login__input--user, .login__input--password{
    box-sizing: border-box;

    background-repeat: no-repeat;
    background-position: 5% center;
    padding-left: 20%;
    /*background-size: 36px;*/
    background-size: calc(20px + (20 - 20) * ((100vw - 320px) / (1080 - 320)));
}
.login__input--user{
    background-image: url('../img/user-icon.png') ;
}
.login__input--password{
    background-image: url('../img/lock-icon.png') ;
}
.login__btn{
    margin: 1.5vw 0;
    padding: 1.5vw 5vw;
}
.login__msg{
    margin: 1% 0 2%;
    font-family: 'Gotham';
    font-size: calc(10px + (16 - 10) * ((100vw - 320px) / (1080 - 320)));

    letter-spacing: 0.05rem;
}
.login__msg--warning{
    color: yellow;
}
.login__msg--danger{
    color: var(--red);
}
@media only screen and (orientation: landscape) {
    .content--login{
        grid-template-rows: repeat(2, auto);
        padding: 3.5vw 10vw;
    }
    .mascote{
        grid-column: 1 / span 1;
    }
    .login{
        padding: 1vw .5vw;

        grid-column: 2 / span 2;
        /*height: 75%;*/
        margin-top: 5%;

        align-self: flex-start;
    }
    .login__title{
        font-size: calc(10px + (46 - 10) * ((100vw - 320px) / (1920 - 320)));
    }
    .login__btn{
        margin: .75vw 0;

        padding: .5vw 2.5vw;
    }
    .login__msg{
        font-size: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
    }

    .login__input--user, .login__input--password{
        padding-left: 15%;
    }
}
@media only screen and (orientation: landscape) and (min-width:  1024px){
    .content--login{
        padding: 3.5vw 10vw;
    }
    .login{
        align-self: center;
    }
}