.block-callout {
    --color-text: var(--color-text-invert);

    --color-form-input-bg: var(--color-form-input-bg-invert);
    --color-form-border: var(--color-form-border-invert);
    --color-form-button: var(--color-form-button-invert);
    --color-form-button-text: var(--color-form-button-text-invert);
    



    margin: 0;
    padding: var(--spacing-top) 0 var(--spacing-bottom) 0;
    position: relative;
    background: var(--bgcolor);

    .subcontainer {
        background: var(--color-black-67);
        padding: 60px 32px;
        border-radius: 12px;
    }


    h2 {
        font-size: var(--font-size-h3);
        line-height: 1.33;
        color: var(--color-text);
        margin-bottom: clamp(32px,4.8vw,48px);
    }

    p {
        color: var(--color-text);
        font-size: var(--font-size-body-l);
        line-height: 1.6;
        font-weight: 400;
        margin: 28px 0 40px 0;
    }

    figure {
        display: none;
        background: rgba(255,255,255,0.05);
        padding: 18px;
        border-radius: 12px;
        max-width: 590px;

        img {
            display: block;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

    .btn {
        --color: #FFFCFB;

        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--color-btn-bg);
        color: var(--color);
        padding: 8px 16px;
        border-radius: 12px;
        font-size:  var(--font-size-body-l);

        &::after {
            content: '';
            mask-image: var(--icon-playcircle);
            mask-size: cover;
            background-color: var(--color);
            width: 24px;
            aspect-ratio: 1;
            display: block;
        }
    }

    .hbspt-form {
        max-width: 550px;
        
        form {
            gap: 8px;
        }

        .actions {
            display: inline-block;
        }

        .hs-input {
            margin-top: 0;
            padding: 10px 20px;
            border-radius: 6px;
        }

        .hs-button {
            display: inline-block;
            width: auto;
            height: auto;
            padding: 8px 16px;
            line-height: 1.625;
            border-radius: 6px;
        }

        .hs-error-msgs {
            display: none;
            
            li {
                margin: 8px 0;
            }
        }

        li {
            label {
                margin: 0 !important;
            }
        }
    }



    @media screen and (min-width: 748px) {
        .subcontainer {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 48px;
            align-items: center;
            justify-items: self-end;
        }

        figure {
            display: block;
        }
    }

    @media screen and (min-width: 1100px) {

        .subcontainer {
            gap: 64px;
        }

        h2 {
            line-height: 1.1;
        }

        p {
            margin: 28px 0 48px 0;
        }


        .hbspt-form {
            form {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .hs-input {
                border-radius: 6px;
                height: 46px;
            }

            .hs-fieldtype-text {
                width: 100%;
            }

          
            .hs_submit {
                width: 100%;
            }

            .hs-button {
                margin-top: 0;
                padding: 10px 20px;
                border-radius: 6px;
                height: 46px;
            }

            .field {
                flex-grow: 1;
            }
        }

    }

}