.simple-cols {
    --simple-col--col-count: 2;
    --simple-col--gap: 4rem;

    --simple-col--gap-half: calc(var(--simple-col--gap) / 2);
    overflow: visible;
}

.simple-cols__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0 calc(var(--simple-col--gap-half) * -1);
}

.simple-cols--cols-2 {
    --simple-col--col-count: 2;
}

.simple-cols--cols-3 {
    --simple-col--col-count: 3;
}

.simple-cols--cols-4 {
    --simple-col--col-count: 4;
}

.simple-cols__col {
    position: relative;
    width: calc(100% / var(--simple-col--col-count));
    box-sizing: border-box;
    padding: 0 var(--simple-col--gap-half);
}

/* simple-cols--dividers */

@media only screen and (min-width: 961px) {
    .simple-cols--dividers .simple-cols__inner {
        --simple-col--gap-half: var(--simple-col--gap);
    }

    .simple-cols--dividers .simple-cols__col:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 1px;
        background: var(--bg-font-color, var(--font-color));
        opacity: 0.4;
    }
}

/* Media-Query */

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

    body:not(.bhe-state-editing) .simple-cols__col__content>.bhElement:nth-last-child(1),
    body.bhe-state-editing .simple-cols__col__content>.bhElement:nth-last-child(2) {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 960px) {
    .simple-cols {
        --simple-col--col-count: 1;
    }

    .simple-cols__inner {
        margin-top: 0;
        margin-bottom: 0;
    }

    .simple-cols__col {
        padding-top: 0;
        padding-bottom: 0;
    }

    body:not(.bhe-state-editing) .simple-cols__col:last-child>.simple-cols__col__content>.bhElement:nth-last-child(1),
    body.bhe-state-editing .simple-cols__col:last-child>.simple-cols__col__content>.bhElement:nth-last-child(2) {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 840px) {
    .simple-cols {
        --simple-col--gap: 2rem;
    }
}