.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;

        // We only allow grow/shrink when wrapping is enabled
        &[data-op3-wrap-columns="1"] > [data-op3-element-type="membershipcontentlistitem"] {
            flex-grow: 1;
            flex-shrink: 1;
        }

        // 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 10px;
                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";
            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";
            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"
                / auto 1fr;
        }

        [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"
                / 1fr auto;
        }

        [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"
                / auto 1fr;
        }

        [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"
                / 1fr auto;
        }
    }
}

@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;
    }
}