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

    > [data-op3-element-container] > [data-op3-children] {
        display: flex;
        flex-wrap: wrap;
        margin-left: -$op-gutter;
        margin-right: -$op-gutter;

        > .op3-element {
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: auto;
        }

        @media (min-width: ($breakpoint-tablet + 1)) {
            &[data-op3-wrap-columns-desktop="0"] > .op3-element {
                flex-grow: 0;
                flex-shrink: 1;
            }
            &[data-op3-wrap-columns-desktop="1"] > .op3-element {
                flex-grow: 1;
                flex-shrink: 1;
            }

            &[data-op3-stack-columns-desktop="1"] {
                margin-left: 0 !important;
                margin-right: 0 !important;

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

                > .op3-element {
                    flex-basis: 100% !important;

                    > .op3-column-content {
                        margin-left: 0 !important;
                        margin-right: 0 !important;
                    }
                }
            }
        }

        @media (max-width: $breakpoint-tablet) and (min-width: ($breakpoint-mobile + 1)) {
            &[data-op3-wrap-columns-tablet="0"] > .op3-element {
                flex-grow: 0;
                flex-shrink: 1;
            }
            &[data-op3-wrap-columns-tablet="1"] > .op3-element {
                flex-grow: 1;
                flex-shrink: 1;
            }

            &[data-op3-stack-columns-tablet="1"] {
                margin-left: 0 !important;
                margin-right: 0 !important;

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

                > .op3-element {
                    flex-basis: 100% !important;

                    > .op3-column-content {
                        margin-left: 0 !important;
                        margin-right: 0 !important;
                    }
                }
            }
        }

        @media (max-width: $breakpoint-mobile) {
            &[data-op3-wrap-columns-mobile="0"] > .op3-element {
                flex-grow: 0;
                flex-shrink: 1;
            }
            &[data-op3-wrap-columns-mobile="1"] > .op3-element {
                flex-grow: 1;
                flex-shrink: 1;
            }

            &[data-op3-stack-columns-mobile="1"] {
                margin-left: 0 !important;
                margin-right: 0 !important;

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

                > .op3-element {
                    flex-basis: 100% !important;

                    > .op3-column-content {
                        margin-left: 0 !important;
                        margin-right: 0 !important;
                    }
                }
            }
        }

        // Show/hide children
        .op3-element[data-op3-element-spec="image"],
        .op3-element[data-op3-element-spec="icon"],
        &[data-op3-block-display-title="0"] .op3-element[data-op3-element-spec="title"],
        .op3-element[data-op3-element-spec="subtitle"],
        .op3-element[data-op3-element-spec="text"],
        .op3-element[data-op3-element-spec="button"] {
            display: none;
        }

        &[data-op3-block-display-media="image"] .op3-element[data-op3-element-spec="image"],
        &[data-op3-block-display-title="1"] .op3-element[data-op3-element-spec="title"],
        &[data-op3-block-display-subtitle="1"] .op3-element[data-op3-element-spec="subtitle"],
        &[data-op3-block-display-text="1"] .op3-element[data-op3-element-spec="text"] {
            display: block;
        }

        &[data-op3-block-display-media="icon"] .op3-element[data-op3-element-spec="icon"] {
            display: table;
            align-self: baseline;
        }

        &[data-op3-block-display-button="1"] .op3-element[data-op3-element-spec="button"] {
            display: flex;
        }
    }

    .op3-element[data-op3-element-type="featureblockitem"] {
        margin-bottom: 20px;

        > .op3-column-content {
            > [data-op3-element-container] > [data-op3-children] {
                display: grid;
                grid-template:
                    "image"
                    "title"
                    "subtitle"
                    "text"
                    "button" / auto;
                grid-gap: 0 10px;
                grid-template-columns: 100%;

                // Overflow ensures that images don't fall out of the layout
                // when sized in pixels to a value that's bigger from 100%
                //
                // UPDATE:
                // Commented out to allow box-shadow to work properly (OP3-1666)
                // overflow: hidden;
                overflow-wrap: break-word;

                .op3-element {
                    &[data-op3-element-spec="image"] {
                        grid-area: image;
                    }

                    &[data-op3-element-spec="icon"] {
                        grid-area: image;
                    }

                    &[data-op3-element-spec="title"] {
                        grid-area: title;
                    }

                    &[data-op3-element-spec="subtitle"] {
                        grid-area: subtitle;
                    }

                    &[data-op3-element-spec="text"] {
                        grid-area: text;
                    }

                    &[data-op3-element-spec="button"] {
                        grid-area: button;
                        margin-left: 0;
                        margin-right: auto;
                        width: 100%;
                    }
                }
            }
        }
    }
}

// Code shared among desktop, tablet, & mobile media queries
@mixin featureBlockLayout($device) {
    .op3-element[data-op3-element-type="featureblock"] {
        [data-op3-block-layout-#{$device}="0"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-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;
            }
        }
    }
}

@include featureBlockLayout(desktop);

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

    .op3-element[data-op3-element-type="featureblock"] {
        padding: 15px 30px;
    }
}

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

    .op3-element[data-op3-element-type="featureblock"] {
        padding: 15px 30px;
    }
}

// Forcing mage 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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        [data-op3-block-layout-#{$device}="5"][data-op3-block-display-media="icon"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        [data-op3-block-layout-#{$device}="8"][data-op3-block-display-media="icon"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        [data-op3-block-layout-#{$device}="9"][data-op3-block-display-media="icon"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children] {
            grid-template-columns: auto 1fr !important;
        }

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

        [data-op3-block-layout-#{$device}="0"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        [data-op3-block-layout-#{$device}="1"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        [data-op3-block-layout-#{$device}="2"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        [data-op3-block-layout-#{$device}="3"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children] {
            grid-template-columns: auto !important;
        }

        [data-op3-block-layout-#{$device}][data-op3-block-display-media="none"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children] {
            grid-template-columns: auto !important;
            grid-auto-columns: 1fr;
            grid-gap: 0;
        }
    }
}

@media (min-width: 1024px) {
    @include featureBlockImageWidth(desktop);
}

@media (min-width: $breakpoint-mobile) and (max-width: $breakpoint-tablet) {
    @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[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        &[data-op3-block-layout-desktop="5"][data-op3-block-display-media="icon"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        &[data-op3-block-layout-desktop="8"][data-op3-block-display-media="icon"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        &[data-op3-block-layout-desktop="9"][data-op3-block-display-media="icon"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children] {
            grid-template-columns: auto 1fr !important;
        }

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

        &[data-op3-block-layout-desktop="0"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        &[data-op3-block-layout-desktop="1"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        &[data-op3-block-layout-desktop="2"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children],
        &[data-op3-block-layout-desktop="3"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children] {
            grid-template-columns: auto !important;
        }

        &[data-op3-block-layout-desktop][data-op3-block-display-media="none"] .op3-element[data-op3-element-type="featureblockitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children] {
            grid-template-columns: auto !important;
            grid-auto-columns: 1fr;
            grid-gap: 0;
        }
    }
}

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