/****************************
 * Content on Background
****************************/
.ifs-content-on-bg {
    padding:var(--ifs-spacing-32);
    container:ifs-content-on-bg-container/inline-size;
}
.ifs-content-on-bg-position-center {
    --bg-w:1px;
    --bg-size:24px;
    --bg-spacing:32px;
    --bg-color:var(--ifs-color-gray-1);

    min-height:400px;
}
.ifs-content-on-bg-position-center::before {
    z-index:2;
    background-image:linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--bg-color), var(--bg-color));
    background-position:var(--bg-spacing) var(--bg-spacing), var(--bg-spacing) var(--bg-spacing),
    calc(100% - var(--bg-spacing)) var(--bg-spacing), calc(100% - var(--bg-spacing)) var(--bg-spacing),
    var(--bg-spacing) calc(100% - var(--bg-spacing)), var(--bg-spacing) calc(100% - var(--bg-spacing)),
    calc(100% - var(--bg-spacing)) calc(100% - var(--bg-spacing)), calc(100% - var(--bg-spacing)) calc(100% - var(--bg-spacing));
    background-size:var(--bg-size) var(--bg-w), var(--bg-w) var(--bg-size),
    var(--bg-size) var(--bg-w), var(--bg-w) var(--bg-size),
    var(--bg-size) var(--bg-w), var(--bg-w) var(--bg-size),
    var(--bg-size) var(--bg-w), var(--bg-w) var(--bg-size);
    background-repeat:no-repeat;
}
.ifs-content-on-bg-position-center .ifs-content-on-bg__content {max-width:660px;}
.ifs-content-on-bg-position-bottom {
    --ifs-spacing-paragraph:16px;

    min-height:438px;
}

/* vc row width option */
.main_content .vc_row.vc_row-no-padding .ifs-content-on-bg {margin-left:0;margin-right:0;}


/*********************************************
 * Content on Background Responsive
**********************************************/
/* large screen */
@media only screen and (min-width:1800px) {
    .ifs-content-on-bg-position-bottom {min-height:22.28vw;}
    .ifs-content-on-bg-position-center .ifs-content-on-bg__content {max-width:40vw;}
}

@media only screen and (min-width:1600px) {
    .ifs-content-on-bg-position-center {min-height:27.7778vw;}
}
@media only screen and (max-width:1180px) {
    .ifs-content-on-bg {padding:28px var(--ifs-gap-container)}
}
@media only screen and (max-width:768px) {
    .ifs-content-on-bg-position-center {--bg-spacing:var(--ifs-gap-container);}
}
@media only screen and (max-width:624px) {
    .ifs-content-on-bg-position-bottom {min-height:auto;}
}
@container ifs-content-on-bg-container (max-width:520px) {
    .ifs-content-on-bg__content table {width:100% !important;}
    .ifs-content-on-bg__content table tr {display:block;}
    .ifs-content-on-bg__content table tr:not(:last-child) {margin-bottom:var(--ifs-gap-container);}
    .ifs-content-on-bg__content table tr td {
        --ifs-spacing-paragraph:4px;

        width:unset !important;display:block;
    }
    .ifs-content-on-bg__content table tr td:not(:last-child) {margin-bottom:var(--ifs-gap-container);}
    .ifs-content-on-bg__content table.no_border tr:not(:last-child) td {padding-bottom:0;}
}