.section-background{
    --curve-height: min(6.96vw, 10rem);

    position: relative;
    padding: var(--block-margin) 0;
}

.section-background[data-top-position="with"]{
    padding-top: 0;
}

.section-background[data-bottom-position="with"]{
    padding-bottom: 0;
}

.section-background[data-top-curve="1"]:not([data-bottom-curve="1"]),
.section-background[data-bottom-curve="1"]:not([data-top-curve="1"]){
    min-height: var(--curve-height);
}

.section-background[data-top-curve="1"][data-bottom-curve="1"]{
    min-height: calc(var(--curve-height) * -2);
}

.section-background[data-remove-top-padding="1"]{
    padding-top: 0;
}

.section-background[data-remove-bottom-padding="1"]{
    padding-bottom: 0;
}

.section-background.alignfull{
    max-width: 100%;
}

/*.section-background > .blocks-container{
    position: relative;
    z-index: 2;
}*/

.section-background[data-top-position="under"] > .blocks-container > *:first-child,
.section-background[data-bottom-position="under"] > .blocks-container > *:first-child{
    position: relative;
    z-index: 2;
}

.section-background > .blocks-container > *:first-child{
    margin-top: 0;
}

.section-background > .blocks-container > *:last-child{
    margin-bottom: 0;
}

.section-background-curve{
    background: transparent;
    pointer-events: none;
}

.section-background-curve svg{
    width: 100%;
    max-height: var(--curve-height);
}

.section-background:is([data-top-position="under"], [data-top-position="over"]) .section-background-curve-top,
.section-background:is([data-bottom-position="under"], [data-bottom-position="over"]) .section-background-curve-bottom{
    position: absolute;
    left: 0;
    width: 100%;
}

.section-background:is([data-top-position="under"], [data-bottom-position="under"]) .section-background-curve{
    z-index: 1;
}

.section-background:is([data-top-position="over"], [data-bottom-position="over"]) .section-background-curve{
    z-index: 3;
}

.section-background:is([data-top-position="under"], [data-top-position="over"]) .section-background-curve-top{
    top: -0.1rem;
}

.section-background:is([data-bottom-position="under"], [data-bottom-position="over"]) .section-background-curve-bottom{
    bottom: -0.1rem;
}

.section-background-curve-top[data-direction="right"]{
    transform: rotateY(180deg) translateY(-0.1rem);
}

.section-background-curve-bottom{
    transform: rotateZ(180deg) translateY(-0.1rem);
}

.section-background-curve-bottom[data-direction="left"]{
    transform: rotateZ(180deg) rotateY(180deg) translateY(-0.1rem);
}

.section-background-curve svg path{
    fill: var(--background-color);
}