page-login {
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-template-rows: 100%;
}

page-login > nav {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: block;
}

page-login > nav.abby {
    background-image: url(./assets/SSEOnline_Login_AC.svg);
}

page-login > nav.big-bird {
    background-image: url(./assets/SSEOnline_Login_BB2.svg);
}

page-login > nav.cookie-monster {
    background-image: url(./assets/SSEOnline_Login_CM3.svg);
}

page-login > nav.elmo {
    background-image: url(./assets/SSEOnline_Login_E.svg);
}

page-login > nav.mothers-day {
	background-image: url(./assets/SSEOnline_Login_MothersDay.svg);
}

page-login > nav.fathers-day {
    background-image: url(./assets/SSEOnline_Login_FathersDay.svg);
}

page-login > nav.halloween {
    background-image: url(./assets/SSEOnline_Login_CVC.svg);
}

page-login > nav.gingerbread-cookie {
    background-image: url(./assets/SSEOnline_Login_Holiday.svg);
}

page-login > nav.earth {
	background-image: url(./assets/SSEOnline_Login_EnvironDay.svg);
}

page-login > nav.july {
    background-image: url(./assets/SSEOnline_Login_July.svg);
}

page-login > nav.summer {
    background-image: url(./assets/SSEOnline_Login_Summer.svg);
}

page-login > nav.year-of-the-horse {
    background-image: url(./assets/SSEOnline_Login_Horse.svg);
}

page-login > nav.holi {
    background-image: url(./assets/SSEOnline_Login_Holi.svg);
}

page-login > nav.easter {
    background-image: url(./assets/SSEOnline_Login_Easter.svg);
}

page-login > nav > img.logo {
    position: absolute;
    top: calc(var(--u) * 0.5);
    left: calc(var(--u) * 0.5);
    height: calc(var(--u) * 1.5);
    z-index: 2;
}

page-login > nav > main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    z-index: 2;
    position: relative;
}

page-login > nav-panel {
    grid-column: 2;
    grid-row: 1;
}

page-login > nav-panel > form-enhance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

page-login > nav-panel > form-enhance > form {
    width: auto;
    gap: var(--u-3xs);
}

page-login > nav-panel > form-enhance > form > footer {
    display: flex;
    justify-content: right;
    gap: var(--u-4xs);
}

page-login > nav-panel > form-enhance.login > form {
    display: grid;
    grid-template-columns: 30vw;
    grid-auto-flow: row;
}

page-login > nav-panel > form-enhance.register > form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    width: 50vw;
}

page-login > nav-panel > form-enhance.reset > form,
page-login > nav-panel > form-enhance.reactivate > form {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    width: 40vw;
}

page-login > button {
    position: absolute;
    top: var(--u);
    right: var(--u);
    z-index: 5;
}