.op3-element[data-op3-element-type="testimonialitem"] {
    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-testimonial__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-testimonial__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-testimonial__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-testimonialitem__container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        margin: 0;
        padding: 20px;
        border: 0 solid #ddd;
        overflow: visible;
        overflow-wrap: break-word;
        transition: inherit;
    }

    .op3-element-testimonialitem__children {
        display: grid;
        grid-template:
            "avatar"
            "title"
            "text"
            "author"
            "company"
            "logo";
        grid-auto-columns: minmax(0, 100%);
        grid-gap: 0 15px;
        flex: 0 1 auto;
        min-width: 0;
        min-height: 0;
        text-align: center;
    }

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

        &[data-op3-element-spec="title"] {
            grid-area: title;
            margin-bottom: 5px;
            line-height: 1.25;
            font-size: 1.5em;
            font-weight: bold;
            text-align: inherit;
        }

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

        &[data-op3-element-spec="avatar"] {
            grid-area: avatar;
            width: 100px;
            margin: 0 auto;
            align-self: center;

            .op3-element-image__container {
                border-radius: 100%;
            }
        }

        &[data-op3-element-spec="author"] {
            grid-area: author;
            margin: 0;
            line-height: 1.25;
            font-size: 1.2em;
            font-weight: bold;
            text-align: inherit;
            align-self: end;
        }

        &[data-op3-element-spec="company"] {
            grid-area: company;
            margin: 0;
            line-height: 1.25;
            font-size: 1em;
            font-weight: bold;
            text-align: inherit;
            align-self: start;
        }

        &[data-op3-element-spec="logo"] {
            grid-area: logo;
            width: 128px;
            margin: 0 auto 5px auto;
            line-height: 1;
        }

        // Autogap grid area is not used, it's only alignment fix.
        &[data-op3-element-spec="autogap"] {
            grid-area: autogap;
        }
    }
}