:root {
        --brand-start: #0ea5e9;
        --brand-end: #6366f1;
    }

    .bg-gradient-brand {
        background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
    }

    .login-wrapper {
        min-height: 100dvh;
    }

    .login-card {
        max-width: 440px;
        width: 100%;
    }

    .brand-badge {
        width: 48px;
        height: 48px;
        border-radius: .9rem;
        display: grid;
        place-items: center;
        font-weight: 800;
    }

    .form-check .form-check-input {
        cursor: pointer
    }

    .btn-icon {
        display: flex;
        align-items: center;
        gap: .5rem
    }

    .side-hero {
        background: radial-gradient(90rem 50rem at 10% 10%, rgba(14, 165, 233, .35), transparent 60%), radial-gradient(60rem 40rem at 90% 20%, rgba(99, 102, 241, .35), transparent 60%);
    }

    .side-hero .quote {
        max-width: 520px
    }

    /* estado padrão */
    .bannerLight,
    .bannerDark {
        display: none;
    }

    /* quando o tema for escuro, mostra a bannerLight */
    html[data-bs-theme="dark"] .bannerLight {
        display: inline-block;
    }

    html[data-bs-theme="dark"] .bannerDark {
        display: none;
    }

    /* quando o tema for claro, mostra a bannerDark */
    html[data-bs-theme="light"] .bannerDark {
        display: inline-block;
    }

    html[data-bs-theme="light"] .bannerLight {
        display: none;
    }

    @media (min-width: 992px) {
        .login-wrapper {
            align-items: stretch
        }
    }