/* ==========================================================
   Counter Doodle — Login
   ========================================================== */

.login-banner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-28);
    color: var(--color-text-inverse);
    background:
        var(--gradient-login-banner),
        url("/assets/images/backgrounds/login-banner.jpg") center / cover no-repeat;
}

.login-logo {
    width: var(--login-logo-width);
}

.login-tagline {
    max-width: var(--login-text-max);
    color: var(--color-text-inverse);
    font-size: var(--font-size-lg);
    font-weight: var(--font-bold);
    line-height: var(--line-snug);
    text-shadow: var(--text-shadow-hero);
}

.login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-36) var(--space-40);
}

.login-form h1 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

.login-sub {
    margin: var(--space-4) 0 var(--space-24);
    font-size: var(--font-size-md);
}

.login-form form .btn {
    margin-top: var(--space-6);
}

.login-footer {
    margin-top: var(--space-24);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}