body#wrapper {
    display: grid;
    justify-content: initial;
    grid-template-areas:
        "nav nav nav nav nav nav"
        "forgot forgot forgot forgot forgot forgot"
        "footer footer footer footer footer footer";
    gap: 0;
    grid-template-rows:
        var(--navbar-height) calc(100vh - var(--navbar-height) - 104px)
        104px;
}

nav#navbar {
    grid-area: nav;
}

footer#footer {
    grid-area: footer;
}

section#forgot {
    grid-area: forgot;
    place-self: center;
}

section#forgot div.forgot {
    margin: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-radius: 7px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
        rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    max-width: 800px;
}

section#forgot div.forgot div.formulario,
section#forgot div.forgot div.message {
    flex-grow: 1;
    width: calc(50%);
}

section#forgot div.forgot div.message object img {
    width: 100%;
    height: 100%;
}

section#forgot div.forgot div.formulario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    min-width: 300px;
}

section#forgot div.forgot div.formulario span.title {
    font-size: 2em;
    text-align: center;
}

section#forgot div.forgot div.formulario a.link {
    color: var(--color-link);
    text-align: center;
}

section#forgot div.forgot div.formulario form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 900px) and (min-height: 700px) {
    section#forgot div.forgot {
        min-height: 300px;
    }
    section#forgot div.forgot div.message img {
        height: 100%;
    }
}

@media (max-width: 899px) {
    section#forgot div.forgot div.message {
        display: none;
    }
}

@media (max-width: 399px) {
    body#wrapper {
        display: grid;
        justify-content: initial;
        grid-template-areas:
            "nav nav nav nav nav nav"
            "forgot forgot forgot forgot forgot forgot"
            "footer footer footer footer footer footer";
        gap: 0;
        grid-template-rows:
            var(--navbar-height) calc(100vh - var(--navbar-height) - 64px)
            64px;
    }
}

@media (max-width: 359px) {
    section#forgot div.forgot {
        margin: 10px;
    }
}

@media (max-width: 320px) {
    section#forgot div.forgot div.formulario {
        min-width: auto;
    }
}