.op3-element[data-op3-element-type="orderbump"] {
    margin: 0;
    padding: 32px;
    max-width: 100%;

    > [data-op3-element-container],
    > [data-op3-element-container] > [data-op3-border] {
        border: 1px solid #e8e8e8;
    }

    > [data-op3-element-container] > [data-op3-border] {
        border-radius: 3px;
    }

    // Show/hide children
    > [data-op3-element-container] > [data-op3-children] {
        display: grid;
        grid-template:
            "checkbox"
            "title"
            "text"
            "image" / auto;
        grid-auto-columns: minmax(0, 100%);
        align-items: start;
        text-align: left;

        // Overflow ensures that images don't fall out of the layout
        // when sized in pixels to a value that's bigger from 100%
        overflow: hidden;
        overflow-wrap: break-word;

        .op3-element {
            &[data-op3-element-type="image"],
            &[data-op3-element-type="icon"],
            &[data-op3-element-type="headline"],
            &[data-op3-element-type="text"] {
                display: none;
            }

            @keyframes opacity {
                from { opacity: 1.0; }
                50% { opacity: 0; }
                to { opacity: 1.0; }
            }
            .op3-element-checkbox-icon[data-op-blink="1"] {
                animation: opacity 1s infinite;
            }

            &[data-op3-element-type="checkbox"] {
                grid-area: checkbox;
                margin: 0 0 12px 0;
                padding: 0;
                width: 100%;
            }

            &[data-op3-element-type="headline"] {
                grid-area: title;
                margin: 0 0 12px 0;
                padding: 0;
            }

            &[data-op3-element-type="text"] {
                grid-area: text;
                font-size: 14px;
                margin: 0 0 12px 0;
                padding: 0;
            }

            &[data-op3-element-type="image"] {
                grid-area: image;
                max-width: none !important;
            }

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

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

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

// Code shared among desktop, tablet, & mobile media queries
@mixin orderBumpLayout($device) {
    .op3-element[data-op3-element-type="orderbump"] {
        > [data-op3-element-container] > [data-op3-children][data-op3-block-layout-#{$device}="0"] {
            grid-template:
                "checkbox"
                "title"
                "text"
                "image";
        }

        > [data-op3-element-container] > [data-op3-children][data-op3-block-layout-#{$device}="1"] {
            grid-template:
                "checkbox"
                "image"
                "title"
                "text";
        }

        > [data-op3-element-container] > [data-op3-children][data-op3-block-layout-#{$device}="2"] {
            grid-template:
                "checkbox checkbox"
                "title title"
                "image text";
            grid-template-columns: 30% minmax(0, 100%);
        }

        > [data-op3-element-container] > [data-op3-children][data-op3-block-layout-#{$device}="3"] {
            grid-template:
                "checkbox checkbox"
                "title title"
                "text image";
            grid-template-columns: minmax(0, 100%) 30%;
        }

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

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

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

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

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

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

@include orderBumpLayout(desktop);

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

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

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

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

@mixin orderBumpImageWidth($device) {
    .op3-element[data-op3-element-type="orderbump"] {
        // Force image width to auto, as it is controled with grid-template-columns as of OP3-1765
        [data-op3-block-layout-#{$device}="2"][data-op3-block-display-media="image"] .op3-element[data-op3-element-type="image"],
        [data-op3-block-layout-#{$device}="3"][data-op3-block-display-media="image"] .op3-element[data-op3-element-type="image"],
        [data-op3-block-layout-#{$device}="4"][data-op3-block-display-media="image"] .op3-element[data-op3-element-type="image"],
        [data-op3-block-layout-#{$device}="5"][data-op3-block-display-media="image"] .op3-element[data-op3-element-type="image"],
        [data-op3-block-layout-#{$device}="6"][data-op3-block-display-media="image"] .op3-element[data-op3-element-type="image"],
        [data-op3-block-layout-#{$device}="7"][data-op3-block-display-media="image"] .op3-element[data-op3-element-type="image"],
        [data-op3-block-layout-#{$device}="8"][data-op3-block-display-media="image"] .op3-element[data-op3-element-type="image"],
        [data-op3-block-layout-#{$device}="9"][data-op3-block-display-media="image"] .op3-element[data-op3-element-type="image"] {
            width: auto !important;
        }

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

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

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

        [data-op3-block-layout-#{$device}="2"][data-op3-block-display-media="none"],
        [data-op3-block-layout-#{$device}="4"][data-op3-block-display-media="none"],
        [data-op3-block-layout-#{$device}="6"][data-op3-block-display-media="none"],
        [data-op3-block-layout-#{$device}="8"][data-op3-block-display-media="none"] {
            grid-template-columns: 0 1fr !important;
        }

        [data-op3-block-layout-#{$device}="3"][data-op3-block-display-media="none"],
        [data-op3-block-layout-#{$device}="5"][data-op3-block-display-media="none"],
        [data-op3-block-layout-#{$device}="7"][data-op3-block-display-media="none"],
        [data-op3-block-layout-#{$device}="9"][data-op3-block-display-media="none"] {
            grid-template-columns: 1fr 0 !important;
        }
    }
}

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

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

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

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

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

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

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