.background-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    --background-box--padding-top: 0px;
    --background-box--padding-bottom: 0px;
    padding-top: var(--background-box--padding-top);
    padding-bottom: var(--background-box--padding-bottom);

    --spacing--small: 20px;
    --spacing--normal: 40px;
    --spacing--large: 80px;
    --spacing--max: 120px;
}

.background-box__content.bhe-state-content-empty {
    margin-bottom: 0;
}

/* padding-top */

.background-box--padding-top-small {
    --background-box--padding-top: var(--spacing--small);
}

.background-box--padding-top-normal {
    --background-box--padding-top: var(--spacing--normal);
}

.background-box--padding-top-large {
    --background-box--padding-top: var(--spacing--large);
}

.background-box--padding-top-max {
    --background-box--padding-top: var(--spacing--max);
}

/* padding-bottom */

.background-box--padding-bottom-small {
    --background-box--padding-bottom: var(--spacing--small);
}

.background-box--padding-bottom-normal {
    --background-box--padding-bottom: var(--spacing--normal);
}

.background-box--padding-bottom-large {
    --background-box--padding-bottom: var(--spacing--large);
}

.background-box--padding-bottom-max {
    --background-box--padding-bottom: var(--spacing--max);
}

/* media-queries */

@media only screen and (max-width: 840px) {
    .background-box {
        --spacing--small: 10px;
        --spacing--normal: 20px;
        --spacing--large: 40px;
        --spacing--max: 60px;
    }
}