.op3-element[data-op3-element-type="membershipcontentlist"] {
    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-type="image"],
        .op3-element[data-op3-element-type="text"] {
            display: none;
        }

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

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

        > .op3-column-content {
            > [data-op3-element-container] > [data-op3-children] {
                display: grid;
                grid-template:
                    "image"
                    "title"
                    "text";
                grid-gap: 0;
                grid-auto-columns: minmax(0, 100%);
                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"] {
                        grid-area: image;
                    }

                    &[data-op3-element-type="headline"] {
                        grid-area: title;

                        // To vertically center content
                        margin-top: auto;
                    }

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

// Code shared among desktop, tablet, & mobile media queries
@mixin membershipContentListLayout($device) {
    .op3-element[data-op3-element-type="membershipcontentlist"] {
        [data-op3-block-layout-#{$device}="0"] .op3-element[data-op3-element-type="membershipcontentlistitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children] {
            grid-template-areas:
                "image"
                "title"
                "text";
            grid-template-columns: 100%;
            column-gap: 0 !important;
            text-align: center;
        }

        [data-op3-block-layout-#{$device}="1"] .op3-element[data-op3-element-type="membershipcontentlistitem"] > .op3-column-content > [data-op3-element-container] > [data-op3-children] {
            grid-template-areas:
                "title"
                "image"
                "text";
            grid-template-columns: 100%;
            column-gap: 0 !important;
            text-align: center;
        }

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

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

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

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

@include membershipContentListLayout(desktop);

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

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

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

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

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

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

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

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

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

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

    .op3-element[data-op3-element-type="membershipcontentlist"] [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"] .op3-element[data-op3-element-type="image"],
        &[data-op3-block-layout-desktop="3"] .op3-element[data-op3-element-type="image"],
        &[data-op3-block-layout-desktop="4"] .op3-element[data-op3-element-type="image"],
        &[data-op3-block-layout-desktop="5"] .op3-element[data-op3-element-type="image"] {
            width: auto !important;
        }

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

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

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

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