.koi-form {
    --content-grid-column-count: 1;
    --content-grid-gap: var(--sds-size-space-800);

    --heading-font-size: 2.25rem;
    --container-gutter-vertical: var(--sds-size-space-800);

    --content-image-width: 100%;

    --form-width: 100%;
    --form-submit-button-width: 100%;

    --form-submit-button-padding: 0.875rem var(--sds-size-space-800);

    @media (width >=64rem) {
        --container-gutter-vertical: var(--sds-size-space-1600);

        --content-grid-column-count: 2;
        --content-grid-gap: var(--sds-size-space-1600);

        --content-image-width: unset;
        --heading-font-size: 3rem;
        --form-width: min(28.2rem, 100%);
        --form-submit-button-width: fit-content;
    }

    background: #F6F7F8;
}

.koi-form-content {
    display: grid;
    grid-template-columns: repeat(var(--content-grid-column-count), 1fr);
    gap: var(--content-grid-gap);
    align-items: center;
}

.koi-form-content-image {
    width: var(--content-image-width);
}

.koi-form-content-form {
    .formulate-form__inner {
        background: transparent;
        max-width: unset;
        width: var(--form-width);
        margin: 0;
    }

    .formulate-form {
        margin-block: 0;
        padding: 0;

        [data-failure-content],
        [data-success-content] {
            color: var(--colors-brand);
        }
    }

    .formulate__grid--12 {
        display: flex;
        flex-direction: column;
        gap: var(--sds-size-space-600);

        .form__field--header,
        .form__field {
            margin-block: 0;
        }
    }

    .formulate-form [data-failure-content],
    .formulate-form [data-success-content],
    .formulate-form form.form {
        padding: 0;
    }

    form.form label,
    .form__field--richtext {
        color: inherit;
    }

    form.form label {
        all: revert;

        color: #1E1E1E;

        /* Input */
        font-family: var(--fonts-montserrat);
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        /* 1rem */
        letter-spacing: -0.01rem;
        text-transform: uppercase;
    }

    .form__field--header {
        all: revert;

        color: var(--colors-brand);
        font-family: var(--fonts-maiah);
        font-size: var(--heading-font-size);
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        /* 48px */
        text-transform: uppercase;

    }

    form.form input[type=email],
    form.form input[type=tel],
    form.form input[type=text],
    form.form textarea {
        padding: var(--sds-size-space-300) var(--sds-size-space-300) var(--sds-size-space-300) var(--sds-size-space-400);
    }

    .form__field--richtext .form__error {
        margin-top: 0;
    }

    form.form input[type=email],
    form.form input[type=tel],
    form.form input[type=text] {
        height: 2.5rem;
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: -0.01rem;
    }

    .form__field--button {
        justify-content: flex-start;

        button {
            width: var(--form-submit-button-width);
            height: 3rem;
            padding: var(--form-submit-button-padding);

            font-family: var(--fonts-proxima-nova);
            font-size: 1.25rem;
            font-style: normal;
            font-weight: 700;
            line-height: 100%;
            text-transform: uppercase;
        }
    }
}