.ark-block-section {
    --arkb-padding: 4rem 1rem;
    --arkb-min-height: unset;
    --arkb-svg-height--top: 0;
    --arkb-svg-height--bottom: 0;
    padding-bottom: var(--arkb-svg-height--bottom);
    padding-top: var(--arkb-svg-height--top);
    position: relative
}

.ark-block-section__media {
    z-index: 0
}

.ark-block-section__img,
.ark-block-section__video {
    object-position: center
}

.ark-block-section__color {
    z-index: 1
}

.ark-block-section__body {
    display: flex;
    position: relative;
    width: 100%;
    z-index: 2
}

:where(.alignfull):not([data-inner=full])>.ark-block-section__body {
    margin: 0 auto;
    max-width: calc(var(--ark-width--article, 1000px) + var(--ark-padding--container, 0px)*2);
    padding-left: var(--ark-padding--container, 0);
    padding-right: var(--ark-padding--container, 0)
}

[data-height=full]>.ark-block-section__body {
    height: 50vh
}

[data-height=custom]>.ark-block-section__body {
    min-height: var(--arkb-min-height)
}

.ark-block-section__body[data-content=top-left] {
    align-items: flex-start;
    justify-content: flex-start
}

.ark-block-section__body[data-content=top-center] {
    align-items: flex-start;
    justify-content: center;
    text-align: center
}

.ark-block-section__body[data-content=top-right] {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right
}

.ark-block-section__body[data-content=center-left] {
    align-items: center;
    justify-content: flex-start
}

.ark-block-section__body[data-content=center-center] {
    align-items: center;
    justify-content: center;
    text-align: center
}

.ark-block-section__body[data-content=center-right] {
    align-items: center;
    justify-content: flex-end;
    text-align: right
}

.ark-block-section__body[data-content=bottom-left] {
    align-items: flex-end;
    justify-content: flex-start
}

.ark-block-section__body[data-content=bottom-center] {
    align-items: flex-end;
    justify-content: center;
    text-align: center
}

.ark-block-section__body[data-content=bottom-right] {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right
}

.ark-block-section__bodyInner {
    padding: var(--arkb-padding);
    width: 100%
}

.ark-block-section .ark-block-section__svg {
    fill: var(--ark-color--bg, #fff);
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 5
}

.ark-block-section .ark-block-section__svg.-top {
    height: var(--arkb-svg-height--top);
    top: -1px
}

.ark-block-section .ark-block-section__svg.-bottom {
    bottom: -1px;
    height: var(--arkb-svg-height--bottom);
    transform: rotate(180deg)
}