#app {
    grid-template-areas: ". . ." ". content ." ". . .";
    grid-template-columns: 1fr 320px 1fr;
    grid-template-rows: 1fr auto 1fr;
}

#app .section {
    grid-area: content;
    display: grid;
    padding: 56px 28px 35px;
    width: 100%;
    height: fit-content;
}

#app .section .logo {
    width: 156px;
    margin: 0 auto 98px;
}

#app form {
    width: 100%;
    margin: 0 auto;
}

#app form input {
    height: 36px;
}

#app form .input-box {
    margin-bottom: 14px;
}

#app form .button {
    margin-top: 42px;
    margin-left: auto;
    padding: 0 14px;
    height: 36px;
}



@media (max-width: 900px) {

    #app {
        grid-template-areas: "content";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    #app .section {
        padding: 72px 28px;
    }

    #app .section .logo {
        width: 161px;
        margin: 0 auto 140px;
    }

    #app form .button {
        margin-top: 42px;
        margin-left: auto;
        padding: 0 14px;
        height: 36px;
        font-size: 14px;
    }

    #app form input {
        height: 42px;
    }

    #app form .input-box {
        margin: 0 0 17.5px;
    }

}