.affiliates-column-forms {
    --form-image-url: none;
    --form-items-gap: 96px;
    --form-min-width: 540px;

    --affiliates-section-login-padding: var(--site-padding-vertical) var(--site-padding-horizontal);
    --section-container-flex-direction: row;
    --section-container-min-height: calc(100vh - var(--site-padding-vertical) * 2);
    --section-container-border-radius: 24px;
    --column-marketing-border-radius: 24px 0 0 24px;
    --column-marketing-aspect-ratio: auto;
    --column-marketing-flex: 0.5;
    --column-form-gap: var(--form-items-gap);
    --column-form-min-width: var(--form-min-width);
    --column-form-padding: 48px 0;

    @media (width <= 1080px) {
        --affiliates-section-login-padding: var(--site-padding-horizontal);
        --section-container-flex-direction: column;
        --section-container-min-height: calc(100vh - var(--site-padding-horizontal) * 2);
        --column-marketing-border-radius: 24px 24px 0 0;
        --column-marketing-aspect-ratio: 16/7;
        --column-form-gap: 96px;
        --column-form-padding: 72px 36px;
    }

    @media (width <= 660px) {
        --column-form-min-width: 100%;
        --column-form-padding: 36px;
    }

    @media (width <= 576px) {
        --affiliates-section-login-padding: 0;
        --section-container-border-radius: 0;
        --section-container-min-height: 100vh;
        --column-marketing-border-radius: 0;
        --column-marketing-aspect-ratio: 16/9;
        --column-marketing-flex: 0;
    }

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--affiliates-section-login-padding);
    background-color: #eaeaec;

    .section-container {
        display: flex;
        flex-direction: var(--section-container-flex-direction);
        align-items: stretch;
        justify-content: start;
        width: 100%;
        max-width: 1280px;
        min-height: var(--section-container-min-height);
        border-radius: var(--section-container-border-radius);
        background-color: #fff;
        box-shadow: 0 0 24px 12px rgb(from var(--color-btm-dark-grey) r g b / 0.1);

        .column-marketing {
            flex: var(--column-marketing-flex);
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: start;
            aspect-ratio: var(--column-marketing-aspect-ratio);
            /*padding: calc(var(--site-padding-vertical) / 2) calc(var(--site-padding-horizontal) / 2);*/
            border-radius: var(--column-marketing-border-radius);
            background-color: var(--color-btm-dark-grey);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            background-image: var(--form-image-url);
        }

        .column-form {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--column-form-gap);
            padding: var(--column-form-padding);

            .form-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 48px;
                width: var(--column-form-min-width);
            }

            .component-form {
                width: var(--column-form-min-width);
            }

            .form-alert-error {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                padding: 12px 14px;
                background-color: #fef2f2;
                border: 1px solid #fca5a5;
                border-radius: 10px;
                color: #991b1b;
                font-size: 16px;
                font-weight: 500;
                line-height: 1.4;

                svg {
                    flex-shrink: 0;
                    margin-top: 2px;
                }
            }
        }

        .form-header {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: start;
            gap: 12px;
            width: var(--column-form-min-width);

            .form-logo {
                width: 200px;
                height: 48px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: start center;
                background-image: url('/assets/svg/logo/full-jiQOsmh.svg');
            }

            h2 {
                font-size: var(--typography-font-size-p);
                line-height: 1;
                margin: 0;
                padding: 0;
                color: rgb(from var(--color-btm-dark-grey) r g b / 0.9);
            }

            p {
                font-size: 18px;
                line-height: 1.5;
                text-align: left;
                color: rgb(from var(--color-btm-dark-grey) r g b / 0.75);

                em {
                    font-weight: 700;
                }
            }
        }

        .form-footer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
    }
}