.section-login {
    --form-width: 540px;
    --form-height: 50vh;
    --form-padding: 16px;

    --header-position: relative;
    --header-justify-content: center;
    --header-background-color: #fff;
    --header-box-shadow: none;
    --header-logo-height: 38px;
    --header-title-color: #2E3C80;
    --header-title-font-size: 28px;

    @media (width < 620px) {
        --form-width: 100%;
        --form-height: 80vh;
        --form-padding: 32px 16px;

        --header-position: fixed;
        --header-justify-content: start;
        --header-background-color: #fff;
        --header-box-shadow: 0 0 6px #fff;
        --header-logo-height: 20px;
        --header-title-color: #2E3C80;
        --header-title-font-size: 16px;
    }

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: var(--form-height);

    .section-container {
        .section-affiliates-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    }

    form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 32px;
        width: var(--form-width);
        padding: var(--form-padding);
        border-radius: 16px;
        background-color: #fff;

        .group-header {
            position: var(--header-position);
            z-index: 10;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            padding: 0 16px;
            background-color: var(--header-background-color);
            box-shadow: var(--header-box-shadow);

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: var(--header-justify-content);
            gap: 6px;

            .logo {
                aspect-ratio: 4.225;
                height: var(--header-logo-height);
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                background-image: url('/assets/svg/logo/full-jiQOsmh.svg');
            }

            h2 {
                font-size: var(--header-title-font-size);
                line-height: 1;
                font-weight: 500;
                color: var(--header-title-color);
                font-family: 'IBM Plex Sans', sans-serif;
            }
        }

        .group-fields {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            gap: 16px;
        }

        .error {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            gap: 12px;
            height: 56px;
            padding: 0 16px;
            font-size: var(--typography-font-size-p);
            line-height: 1;
            color: var(--color-btm-dark-red);
            background-color: rgb(from var(--color-btm-dark-red) r g b / 0.1);

            &:before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                background-color: var(--color-btm-dark-red);
                mask: url('/assets/svg/misc/warning-ULUjsGD.svg') no-repeat center / contain;
            }
        }

        label {
            display: flex;
            margin: 0;
            border: 0;
            padding: 0;

            input {
                --outline-width: 1px;
                --outline-color: rgb(from var(--color-btm-dark-blue) r g b / 0.5);

                width: 100%;
                margin: 0;
                border: 0;
                outline: 0;
                padding: calc(28px - var(--typography-font-size-p)) var(--typography-font-size-p);
                font-size: var(--typography-font-size-p);
                line-height: calc(var(--typography-font-size-p) * 2);
                border-radius: 12px;
                font-family: 'Poppins', sans-serif;
                box-shadow: 0 0 0 var(--outline-width) var(--outline-color);
                background-color: rgb(from var(--color-btm-dark-blue) r g b / 0.1);

                &:focus {
                    --outline-width: 2px;
                    --outline-color: var(--color-btm-orange);
                }
            }
        }

        button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 56px;
            margin: 0;
            border: 0;
            padding: 0 var(--typography-font-size-p);
            font-size: 22px;
            font-weight: 600;
            line-height: 1;
            border-radius: 12px;
            color: #fff;
            font-family: 'IBM Plex Sans', sans-serif;
            background-color: var(--color-btm-dark-blue);
        }
    }
}