.catalog-form-widget {

    /* add the background to the container*/
    &:before {
        content:' ';
        height:100%;
        width:50%;
        position:absolute;
        background-color:var(--e-global-color-primary);
        top:0;
        left: 0;
    }

    &.row-reverse:before {
        left: unset;
        right: 0;
    }

    & ul {
        padding-left: 0;

        & li {
            list-style-type: none;
            font-weight: 700;
            padding-left: 63px;
            position: relative;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            margin-bottom: 8px;

            &:before {
                content: ' ';
                position: absolute;
                left: 0;
                top: 0;
                width: 40px;
                height: 40px;
                background-image: url("/wp-content/themes/biofire-understrap-child/icons/Flame.svg");
                background-repeat: no-repeat;
                background-size: contain;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.catalog-form-widget .img-container,
.catalog-form-widget .img-row {
    gap: 2rem !important;
}
.catalog-form-widget .img-row img {
    width: calc( 50% - 1rem ); /*otherwise the images grow over the content width*/
    height: auto;
}


/* Stretch the form widget over full width on mobile devices so that that background thing works */
@media screen and (max-width: 768px) {
    .catalog-form-widget:before {
        content: unset;
    }


    .container.catalog-form-widget {
        width: 100% !important;
        max-width: 100% !important;

        & .row .mobile-background-container,
        & .row .bg-white {
            max-width: 540px !important;
            margin-left: auto;
            margin-right: auto;
        }
        /*here we want bg-color */
        & .row .bg-color:before {
            content:' ';
            height:100%;
            width:100%;
            position:absolute;
            background-color:var(--e-global-color-primary);
            top:0;
            left: 0;
            z-index: -1;
        }
    }

    .catalog-form-widget .img-row,
    .catalog-form-widget .img-container {
        gap: 1rem !important;
    }

    .catalog-form-widget .img-row img {
        width: calc( 50% - 0.5rem ) !important;
    }
}