.auth {
    background: var(--background-colour);
    max-width: 400px;
    margin: 0 auto;
    margin-bottom: 2px;

    &__header {
        background: var(--user-header) center / cover no-repeat, var(--background-pattern);
        background-color: var(--accent-colour);
        background-blend-mode: normal, multiply;

        &__wrapper {
            display: flex;
            justify-content: center;
            padding: 20px;
            background-image: linear-gradient(0deg, var(--background-colour-translucent), transparent);
        }
    }

    &__warning {
        margin: 2px 5px 0;

        &--welcome {
            --start-colour: var(--accent-colour);
            --end-colour: #222;
        }
    }

    &__avatar {
        width: 100px;
        height: 100px;
    }

    &__paragraph,
    &__input {
        margin-bottom: 5px;
    }

    &__form {
        padding: 5px;
        display: flex;
        flex-direction: column;
    }
}