@layer components {

    .auth {
        display: grid;
        justify-items: center;
        padding: var(--s-9) var(--gutter) 0;
    }

    .auth__card {
        display: grid;
        gap: var(--s-4);
        width: 100%;
        max-width: 460px;
    }

    .auth__title {
        font-size: var(--t-2xl);
    }

    .auth__text {
        color: var(--c-muted);
    }

    .auth__form {
        display: grid;
        gap: var(--s-4);
        margin-top: var(--s-2);
    }

    .auth__demo {
        display: grid;
        gap: var(--s-4);
        margin-top: var(--s-3);
        padding: var(--s-5);
        border-radius: var(--r-1);
        background: var(--c-tile);
        font-size: var(--t-sm);
    }

    .auth__alt {
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

}