.op3-element[data-op3-element-type="numberblock"] {
    display: flex;
    flex-direction: column;
    width: 1140px;
    max-width: 100%;
    margin: 0 auto;

    --op3-flex-column-gap:20px;
    --op3-flex-basis-steps:3;

    .op3-element-numberblock__container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 15px 0;
        overflow: visible;

        @media (max-width: $breakpoint-tablet) {
            padding: 15px 30px;

            .op3-element[data-op3-element-type="row"] & {
                padding: 15px 0;
            }
        }
    }

    .op3-element-numberblock__children {
        display: flex;
        flex: 0;
        flex-wrap: wrap;
        gap: 20px var(--op3-flex-column-gap);
        align-items: normal;

        // Counter increment logic
        &[data-op3-numberblock-sequence="all"] {
            counter-reset: numberblock;

            .op3-element[data-op3-element-type="numberblockitem"] {
                counter-increment: numberblock;
            }
        }

        &[data-op3-numberblock-sequence="odd"] {
            counter-reset: numberblock -1;

            .op3-element[data-op3-element-type="numberblockitem"] {
                counter-increment: numberblock 2;
            }
        }

        &[data-op3-numberblock-sequence="even"] {
            counter-reset: numberblock;

            .op3-element[data-op3-element-type="numberblockitem"] {
                counter-increment: numberblock 2;
            }
        }
    }
}

// Set flex shrink/grow for stacked and wrapped columns.
@mixin numberColumnsWrapAndStack($device) {
    .op3-element[data-op3-element-type="numberblock"] .op3-element-numberblock__children {
        &[data-op3-wrap-columns-#{$device}="0"] .op3-element[data-op3-element-type="numberblockitem"] {
            flex-grow: 0;
            flex-shrink: 1;
        }
        &[data-op3-wrap-columns-#{$device}="1"] .op3-element[data-op3-element-type="numberblockitem"] {
            flex-grow: 1;
            flex-shrink: 1;
        }

        &[data-op3-stack-columns-#{$device}="1"] {
            &[data-op3-stack-columns-#{$device}-reverse="1"] {
                flex-wrap: wrap-reverse;
            }

            .op3-element[data-op3-element-type="numberblockitem"] {
                flex-basis: 100% !important;
            }
        }
    }
}

// Set grid template.
@mixin numberBlockLayout($device) {
    .op3-element[data-op3-element-type="numberblock"] {
        [data-op3-block-layout-#{$device}="0"] {
            .op3-element[data-op3-element-type="numberblockitem"] .op3-element-numberblockitem__container {
                flex-direction: row;
            }

            .op3-element-numberblockitem__number {
                margin-left: 0 !important;
                margin-bottom: 0 !important;
            }

            .op3-element[data-op3-element-type="numberblockitem"] {
                text-align: left;
            }
        }

        [data-op3-block-layout-#{$device}="1"] {
            .op3-element[data-op3-element-type="numberblockitem"] .op3-element-numberblockitem__container {
                flex-direction: row-reverse;
            }

            .op3-element-numberblockitem__number {
                margin-right: 0 !important;
                margin-bottom: 0 !important;
            }

            .op3-element[data-op3-element-type="numberblockitem"] {
                text-align: left;
            }
        }

        [data-op3-block-layout-#{$device}="2"] {
            .op3-element[data-op3-element-type="numberblockitem"] .op3-element-numberblockitem__container {
                flex-direction: column;
            }

            .op3-element-numberblockitem__number {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            .op3-element[data-op3-element-type="numberblockitem"] {
                text-align: center;
            }
        }

        [data-op3-block-layout-#{$device}="3"] {
            .op3-element[data-op3-element-type="numberblockitem"] .op3-element-numberblockitem__container {
                flex-direction: column;
            }

            .op3-element-numberblockitem__number {
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            .op3-element[data-op3-element-type="numberblockitem"] {
                text-align: left;
            }
        }
    }
}

// Item layouts, wrap and stack columns.
@media (min-width: ($breakpoint-tablet + 1)) {
    @include numberBlockLayout(desktop);
    @include numberColumnsWrapAndStack(desktop);
}

@media (max-width: $breakpoint-tablet) and (min-width: ($breakpoint-mobile + 1)) {
    @include numberBlockLayout(tablet);
    @include numberColumnsWrapAndStack(tablet);
}

@media (max-width: $breakpoint-mobile) {
    @include numberBlockLayout(mobile);
    @include numberColumnsWrapAndStack(mobile);
}