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

    --op3-flex-column-gap:2em;
    --op3-flex-basis-steps:3;

    .op3-element-featureblock__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-featureblock__children {
        display: flex;
        width: 100%;
        flex: 0;
        flex-wrap: wrap;
        gap: 20px var(--op3-flex-column-gap);
        align-items: normal;
    }
}

// Set flex shrink/grow for stacked and wrapped columns.
@mixin featureColumnsWrapAndStack($device) {
    .op3-element[data-op3-element-type="featureblock"] .op3-element-featureblock__children {
        &[data-op3-wrap-columns-#{$device}="0"] .op3-element[data-op3-element-type="featureblockitem"] {
            flex-grow: 0;
            flex-shrink: 1;
        }
        &[data-op3-wrap-columns-#{$device}="1"] .op3-element[data-op3-element-type="featureblockitem"] {
            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="featureblockitem"] {
                flex-basis: 100% !important;
            }
        }
    }
}

// Set grid template.
@mixin featureBlockLayout($device) {
    .op3-element[data-op3-element-type="featureblock"] {
        [data-op3-block-layout-#{$device}="0"] .op3-element-featureblockitem__children {
            grid-template-areas:
                "image"
                "title"
                "subtitle"
                "text"
                "button";
            grid-gap: 0;

            .op3-element {
                &[data-op3-element-spec="button"] {
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }

        [data-op3-block-layout-#{$device}="1"] .op3-element-featureblockitem__children {
            grid-template-areas:
                "image"
                "subtitle"
                "title"
                "text"
                "button";
            grid-gap: 0;

            .op3-element {
                &[data-op3-element-spec="button"] {
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }

        [data-op3-block-layout-#{$device}="2"] .op3-element-featureblockitem__children {
            grid-template-areas:
                "title"
                "subtitle"
                "image"
                "text"
                "button";
            grid-gap: 0;

            .op3-element {
                &[data-op3-element-spec="button"] {
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }

        [data-op3-block-layout-#{$device}="3"] .op3-element-featureblockitem__children {
            grid-template-areas:
                "subtitle"
                "title"
                "image"
                "text"
                "button";
            grid-gap: 0;

            .op3-element {
                &[data-op3-element-spec="button"] {
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }

        [data-op3-block-layout-#{$device}="4"] .op3-element-featureblockitem__children {
            grid-template:
                "image title"
                "image subtitle"
                "text text"
                "button button";
            grid-template-columns: 30% minmax(0, 100%);
        }

        [data-op3-block-layout-#{$device}="5"] .op3-element-featureblockitem__children {
            grid-template:
                "image subtitle"
                "image title"
                "text text"
                "button button";
            grid-template-columns: 30% minmax(0, 100%);
        }

        [data-op3-block-layout-#{$device}="6"] .op3-element-featureblockitem__children {
            grid-template:
                "title image"
                "subtitle image"
                "text text"
                "button button";
            grid-template-columns: minmax(0, 100%) 30%;

            .op3-element[data-op3-element-spec="icon"] {
                margin-left: auto;
                margin-right: 0;
            }
        }

        [data-op3-block-layout-#{$device}="7"] .op3-element-featureblockitem__children {
            grid-template:
                "subtitle image"
                "title image"
                "text text"
                "button button";
            grid-template-columns: minmax(0, 100%) 30%;

            .op3-element[data-op3-element-spec="icon"] {
                margin-left: auto;
                margin-right: 0;
            }
        }

        [data-op3-block-layout-#{$device}="8"] .op3-element-featureblockitem__children {
            grid-template:
                "image title"
                "image subtitle"
                "image text"
                "image button";
            grid-template-columns: 30% minmax(0, 100%);
        }

        [data-op3-block-layout-#{$device}="9"] .op3-element-featureblockitem__children {
            grid-template:
                "image subtitle"
                "image title"
                "image text"
                "image button";
            grid-template-columns: 30% minmax(0, 100%);
        }

        [data-op3-block-layout-#{$device}="10"] .op3-element-featureblockitem__children {
            grid-template:
                "title image"
                "subtitle image"
                "text image"
                "button image";
            grid-template-columns: minmax(0, 100%) 30%;

            .op3-element[data-op3-element-spec="icon"] {
                margin-left: auto;
                margin-right: 0;
            }
        }

        [data-op3-block-layout-#{$device}="11"] .op3-element-featureblockitem__children {
            grid-template:
                "subtitle image"
                "title image"
                "text image"
                "button image";
            grid-template-columns: minmax(0, 100%) 30%;

            .op3-element[data-op3-element-spec="icon"] {
                margin-left: auto;
                margin-right: 0;
            }
        }
    }
}

// Forcing image width depending on a block layout
@mixin featureBlockImageWidth($device) {
    .op3-element[data-op3-element-type="featureblock"] {
        // Force image width to auto, as it is controled with grid-template-columns as of OP3-1765
        [data-op3-block-layout-#{$device}="4"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        [data-op3-block-layout-#{$device}="5"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        [data-op3-block-layout-#{$device}="6"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        [data-op3-block-layout-#{$device}="7"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        [data-op3-block-layout-#{$device}="8"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        [data-op3-block-layout-#{$device}="9"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        [data-op3-block-layout-#{$device}="10"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        [data-op3-block-layout-#{$device}="11"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"] {
            width: auto !important;
        }

        [data-op3-block-layout-#{$device}="4"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        [data-op3-block-layout-#{$device}="5"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        [data-op3-block-layout-#{$device}="8"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        [data-op3-block-layout-#{$device}="9"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children {
            grid-template-columns: auto 1fr !important;
        }

        [data-op3-block-layout-#{$device}="6"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        [data-op3-block-layout-#{$device}="7"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        [data-op3-block-layout-#{$device}="10"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        [data-op3-block-layout-#{$device}="11"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children {
            grid-template-columns: 1fr auto !important;
        }

        [data-op3-block-layout-#{$device}="0"] .op3-element-featureblockitem__children,
        [data-op3-block-layout-#{$device}="1"] .op3-element-featureblockitem__children,
        [data-op3-block-layout-#{$device}="2"] .op3-element-featureblockitem__children,
        [data-op3-block-layout-#{$device}="3"] .op3-element-featureblockitem__children {
            grid-template-columns: auto !important;
        }

        [data-op3-block-layout-#{$device}][data-op3-block-display-media="none"] .op3-element-featureblockitem__children {
            grid-template-columns: auto !important;
            grid-auto-columns: 1fr;
            grid-gap: 0;
        }
    }
}

// Item layouts.
@include featureBlockLayout(desktop);

@media (max-width: $breakpoint-tablet) {
    @include featureBlockLayout(tablet);
}

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

// Wrap and stack columns.
@media (min-width: ($breakpoint-tablet + 1)) {
    @include featureColumnsWrapAndStack(desktop);
}

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

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

// Image width fix.
@media (min-width: ($breakpoint-tablet + 1)) {
    @include featureBlockImageWidth(desktop);
}

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

    // Force image width to auto, as it is controled with grid-template-columns as of OP3-1765 -- inherit from desktop
    .op3-element[data-op3-element-type="featureblock"] [data-op3-block-layout-tablet="null"] {
        &[data-op3-block-layout-desktop="4"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        &[data-op3-block-layout-desktop="5"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        &[data-op3-block-layout-desktop="6"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        &[data-op3-block-layout-desktop="7"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        &[data-op3-block-layout-desktop="8"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        &[data-op3-block-layout-desktop="9"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        &[data-op3-block-layout-desktop="10"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        &[data-op3-block-layout-desktop="11"][data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"] {
            width: auto !important;
        }

        &[data-op3-block-layout-desktop="4"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        &[data-op3-block-layout-desktop="5"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        &[data-op3-block-layout-desktop="8"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        &[data-op3-block-layout-desktop="9"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children {
            grid-template-columns: auto 1fr !important;
        }

        &[data-op3-block-layout-desktop="6"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        &[data-op3-block-layout-desktop="7"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        &[data-op3-block-layout-desktop="10"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children,
        &[data-op3-block-layout-desktop="11"][data-op3-block-display-media="icon"] .op3-element-featureblockitem__children {
            grid-template-columns: 1fr auto !important;
        }

        &[data-op3-block-layout-desktop="0"] .op3-element-featureblockitem__children,
        &[data-op3-block-layout-desktop="1"] .op3-element-featureblockitem__children,
        &[data-op3-block-layout-desktop="2"] .op3-element-featureblockitem__children,
        &[data-op3-block-layout-desktop="3"] .op3-element-featureblockitem__children {
            grid-template-columns: auto !important;
        }

        &[data-op3-block-layout-desktop][data-op3-block-display-media="none"] .op3-element-featureblockitem__children {
            grid-template-columns: auto !important;
            grid-auto-columns: 1fr;
            grid-gap: 0;
        }
    }
}

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