.op3-element[data-op3-element-type="featureblockitem"] {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    min-height: 16px;

    // This will prevent element grow when child title or text has word wider
    // than flex-basis.
    min-width: 0;

    // Custom flex-basis will work only if responsive columns are set to wrap
    // or stack (see below).
    //
    // Note:
    // Flex basis doesn't take gap in consideration. For example, having two
    // columns with some gap and setting flex-basis to 50% will stack columns.
    //
    // Important:
    // Accurate flex-basis rule here would be the same as for devices below,
    // but we can not use complicated rules be cause editor needs computed
    // value to be number with unit, not calc value...
    flex-basis: calc(100% / var(--op3-flex-basis-steps));

    @media (min-width: ($breakpoint-tablet + 1)) {
        .op3-element-featureblock__children:not([data-op3-wrap-columns-desktop="1"]):not([data-op3-stack-columns-desktop="1"]) & {
            flex-basis: calc((100% - var(--op3-flex-column-gap) * (var(--op3-flex-basis-steps) - 1)) / var(--op3-flex-basis-steps)) !important;
        }
    }

    @media (max-width: $breakpoint-tablet) and (min-width: ($breakpoint-mobile + 1)) {
        .op3-element-featureblock__children:not([data-op3-wrap-columns-tablet="1"]):not([data-op3-stack-columns-tablet="1"]) & {
            flex-basis: calc((100% - var(--op3-flex-column-gap) * (var(--op3-flex-basis-steps) - 1)) / var(--op3-flex-basis-steps)) !important;
        }
    }

    @media (max-width: $breakpoint-mobile) {
        .op3-element-featureblock__children:not([data-op3-wrap-columns-mobile="1"]):not([data-op3-stack-columns-mobile="1"]) & {
            flex-basis: calc((100% - var(--op3-flex-column-gap) * (var(--op3-flex-basis-steps) - 1)) / var(--op3-flex-basis-steps)) !important;
        }
    }

    .op3-element-featureblockitem__container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        margin: 0;
        padding: 0;
        border-width: 0;
        overflow: hidden;
        overflow-wrap: break-word;
        transition: inherit;
    }

    .op3-element-featureblockitem__children {
        display: grid;
        flex: 0;
        min-width: 0;
        grid-template:
            "image"
            "title"
            "subtitle"
            "text"
            "button" / auto;
        grid-gap: 0 10px;
        grid-template-columns: 100%;
        align-content: flex-start;

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

    // Child elements.
    .op3-element {
        min-width: 0;

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

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

        &[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%;
        }
    }
}