.op3-element[data-op3-element-type="testimonial"] {
    display: flex;
    flex-direction: column;
    width: 1140px;
    max-width: 100%;
    margin: 0 auto;

    --op3-flex-column-gap:20px;
    --op3-flex-basis-steps:3;

    .op3-element-testimonial__container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 15px 0;
        overflow: visible;

        @media (max-width: $breakpoint-tablet) {
            padding: 15px 30px;

            .op3-element[data-op3-element-type="row"] & {
                padding: 15px 0;
            }
        }
    }

    .op3-element-testimonial__children {
        display: flex;
        flex: 0;
        flex-wrap: wrap;
        gap: 20px var(--op3-flex-column-gap);
        align-items: normal;
    }
}

// Set flex shrink/grow for stacked and wrapped columns.
@mixin testimonialColumnsWrapAndStack($device) {
    .op3-element[data-op3-element-type="testimonial"] .op3-element-testimonial__children {
        &[data-op3-wrap-columns-#{$device}="0"] .op3-element[data-op3-element-type="testimonialitem"] {
            flex-grow: 0;
            flex-shrink: 1;
        }
        &[data-op3-wrap-columns-#{$device}="1"] .op3-element[data-op3-element-type="testimonialitem"] {
            flex-grow: 1;
            flex-shrink: 1;
        }

        &[data-op3-stack-columns-#{$device}="1"] {
            &[data-op3-stack-columns-#{$device}-reverse="1"] {
                flex-wrap: wrap-reverse;
            }

            .op3-element[data-op3-element-type="testimonialitem"] {
                flex-basis: 100% !important;
            }
        }
    }
}

// Set grid template.
@mixin testimonialLayout($device) {
    // .op3-element[data-op3-element-type="testimonial"] [data-op3-block-layout-desktop="1"][data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"] .op3-element-testimonialitem__children
    .op3-element[data-op3-element-type="testimonial"] {
        [data-op3-block-layout-#{$device}="0"] {
            .op3-element-testimonialitem__children {
                grid-template:
                    "title  title"
                    "text   text"
                    "avatar logo"
                    "avatar author"
                    "avatar company"
                    / minmax(0, min-content) minmax(0, 100%);
                text-align: left;

                .op3-element {
                    &[data-op3-element-spec="company"] {
                        align-self: start;
                    }

                    &[data-op3-element-spec="author"] {
                        align-self: center;
                    }

                    &[data-op3-element-spec="logo"] {
                        align-self: end;
                    }
                }
            }

            // avatar, company
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title title"
                        "text text"
                        "avatar company"
                        / minmax(0, min-content) minmax(0, 100%);
                }

                .op3-element {
                    &[data-op3-element-spec="company"] {
                        align-self: center;
                    }
                }
            }

            // avatar, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title title"
                        "text text"
                        "avatar author"
                        / minmax(0, min-content) minmax(0, 100%);
                }
            }

            // avatar, logo
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title title"
                        "text text"
                        "avatar logo"
                        / minmax(0, min-content) minmax(0, 100%);
                }

                .op3-element {
                    &[data-op3-element-spec="logo"] {
                        align-self: center;
                    }
                }
            }

            // avatar, company, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title title"
                        "text text"
                        "avatar author"
                        "avatar company"
                        / minmax(0, min-content) minmax(0, 100%);

                    .op3-element {
                        &[data-op3-element-spec="author"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="company"] {
                            align-self: start;
                        }
                    }
                }
            }

            // avatar, logo, company
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title title"
                        "text text"
                        "avatar logo"
                        "avatar company"
                        / minmax(0, min-content) minmax(0, 100%);

                    .op3-element {
                        &[data-op3-element-spec="logo"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="company"] {
                            align-self: start;
                        }
                    }
                }
            }

            // avatar, logo, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title title"
                        "text text"
                        "avatar logo"
                        "avatar author"
                        / minmax(0, min-content) minmax(0, 100%);

                    .op3-element {
                        &[data-op3-element-spec="logo"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="author"] {
                            align-self: start;
                        }
                    }
                }
            }

            // remove gap when avatar is hidden
            &[data-op3-block-display-avatar="0"] {
                .op3-element-testimonial__children {
                    grid-gap: 0;
                }

                .op3-element-testimonialitem__children {
                    .op3-element[data-op3-element-spec="company"],
                    .op3-element[data-op3-element-spec="author"] {
                        margin-bottom: 5px;
                    }

                    .op3-element[data-op3-element-spec="logo"] {
                        margin-bottom: 10px;
                    }
                }
            }
        }

        [data-op3-block-layout-#{$device}="1"] {
            .op3-element-testimonialitem__children {
                grid-template:
                    "avatar logo"
                    "avatar author"
                    "avatar company"
                    "title  title"
                    "text   text"
                    / minmax(0, min-content) minmax(0, 100%);
                text-align: left;

                .op3-element {
                    &[data-op3-element-spec="title"] {
                        margin-bottom: 5px;
                    }

                    &[data-op3-element-spec="company"] {
                        align-self: start;
                    }

                    &[data-op3-element-spec="author"] {
                        align-self: center;
                    }

                    &[data-op3-element-spec="logo"] {
                        align-self: end;
                    }
                }
            }

            // avatar, company
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "avatar company"
                        "title title"
                        "text text"
                        / auto 1fr;
                }

                .op3-element {
                    &[data-op3-element-spec="company"] {
                        align-self: center;
                    }
                }
            }

            // avatar, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "avatar author"
                        "title title"
                        "text text"
                        / auto 1fr;
                }
            }

            // avatar, logo
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "avatar logo"
                        "title title"
                        "text text"
                        / auto 1fr;
                }

                .op3-element {
                    &[data-op3-element-spec="logo"] {
                        align-self: center;
                    }
                }
            }

            // avatar, company, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "avatar author"
                        "avatar company"
                        "title title"
                        "text text"
                        / auto 1fr;

                    .op3-element {
                        &[data-op3-element-spec="author"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="company"] {
                            align-self: start;
                        }
                    }
                }
            }

            // avatar, logo, company
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "avatar logo"
                        "avatar company"
                        "title title"
                        "text text"
                        / auto 1fr;

                    .op3-element {
                        &[data-op3-element-spec="logo"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="company"] {
                            align-self: start;
                        }
                    }
                }
            }

            // avatar, logo, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "avatar logo"
                        "avatar author"
                        "title title"
                        "text text"
                        / auto 1fr;

                    .op3-element {
                        &[data-op3-element-spec="logo"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="author"] {
                            align-self: start;
                        }
                    }
                }
            }

            // add space between avatar & title
            &[data-op3-block-display-title="1"] {
                .op3-element-testimonialitem__children {
                    .op3-element[data-op3-element-spec="title"] {
                        margin-top: 10px;
                    }
                }
            }

            // add space between avatar & text (when title is hidden)
            &[data-op3-block-display-title="0"] {
                .op3-element-testimonialitem__children {
                    .op3-element[data-op3-element-spec="text"] {
                        margin-top: 5px;
                    }
                }
            }

            // remove gap when avatar is hidden
            &[data-op3-block-display-avatar="0"] {
                .op3-element-testimonial__children {
                    grid-gap: 0;
                }

                .op3-element-testimonialitem__children {
                    .op3-element[data-op3-element-spec="company"],
                    .op3-element[data-op3-element-spec="author"] {
                        margin-bottom: 5px;
                    }

                    .op3-element[data-op3-element-spec="logo"] {
                        margin-bottom: 10px;
                    }
                }
            }
        }

        [data-op3-block-layout-#{$device}="2"] {
            .op3-element-testimonialitem__children {
                grid-template:
                    "avatar"
                    "title"
                    "text"
                    "author"
                    "company"
                    "logo"
                    / minmax(0, 100%);
            }

            .op3-element-testimonialitem__children {
                .op3-element[data-op3-element-spec="avatar"] {
                    margin-bottom: 10px;
                }

                .op3-element[data-op3-element-spec="author"],
                .op3-element[data-op3-element-spec="company"],
                .op3-element[data-op3-element-spec="logo"] {
                    margin-bottom: 5px;
                }

                .op3-element[data-op3-element-spec="logo"] {
                    margin-top: 5px;
                }
            }

            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="0"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "avatar"
                        "title"
                        "text"
                        "author"
                        "company"
                        "logo"
                        / minmax(0, 100%);
                }
            }

        }

        [data-op3-block-layout-#{$device}="3"] {
            .op3-element-testimonialitem__children {
                grid-template:
                    "title"
                    "text"
                    "avatar"
                    "author"
                    "company"
                    "logo"
                    / minmax(0, 100%);
            }

            .op3-element-testimonialitem__children {
                .op3-element[data-op3-element-spec="avatar"] {
                    margin-bottom: 10px;
                }

                .op3-element[data-op3-element-spec="author"],
                .op3-element[data-op3-element-spec="company"],
                .op3-element[data-op3-element-spec="logo"] {
                    margin-bottom: 5px;
                }

                .op3-element[data-op3-element-spec="logo"] {
                    margin-top: 5px;
                }
            }

            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="0"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title"
                        "text"
                        "avatar"
                        "author"
                        "company"
                        "logo"
                        / minmax(0, 100%);
                }
            }
        }

        [data-op3-block-layout-#{$device}="4"] {
            .op3-element-testimonialitem__children {
                text-align: center;
                grid-template:
                    "title  title   title    title"
                    "text   text    text    text"
                    ".      avatar  logo     ."
                    ".      avatar  author   ."
                    ".      avatar  company  ."
                    / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);

                .op3-element {
                    &[data-op3-element-spec="avatar"] {
                        align-self: start;
                        justify-self: end;
                    }

                    &[data-op3-element-spec="company"] {
                        align-self: start;
                        justify-self: start;
                        text-align: left;
                    }

                    &[data-op3-element-spec="author"] {
                        align-self: center;
                        justify-self: start;
                        text-align: left;
                    }

                    &[data-op3-element-spec="logo"] {
                        align-self: end;
                        justify-self: start;
                    }
                }
            }

            // remove gap when avatar is hidden
            &[data-op3-block-display-avatar="0"] {
                .op3-element-testimonialitem__children {
                    grid-gap: 0;

                    .op3-element[data-op3-element-spec="author"],
                    .op3-element[data-op3-element-spec="company"],
                    .op3-element[data-op3-element-spec="logo"] {
                        margin-bottom: 5px;
                    }
                }
            }

            // avatar, company
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title  title   title   title"
                        "text   text    text    text"
                        ".      avatar  company ."
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);
                }

                .op3-element {
                    &[data-op3-element-spec="company"] {
                        align-self: center;
                    }
                }
            }

            // avatar, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title  title   title   title"
                        "text   text    text    text"
                        ".      avatar  author  ."
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);
                }
            }

            // avatar, logo
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title  title   title   title"
                        "text   text    text    text"
                        ".      avatar  logo  ."
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);
                }

                .op3-element {
                    &[data-op3-element-spec="logo"] {
                        align-self: center;
                    }
                }
            }

            // avatar, company, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title  title   title   title"
                        "text   text    text    text"
                        ".      avatar  author  ."
                        ".      avatar  company ."
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);

                    .op3-element {
                        &[data-op3-element-spec="author"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="company"] {
                            align-self: start;
                        }
                    }
                }
            }

            // avatar, logo, company
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title  title   title   title"
                        "text   text    text    text"
                        ".      avatar  logo    ."
                        ".      avatar  company ."
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);

                    .op3-element {
                        &[data-op3-element-spec="logo"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="company"] {
                            align-self: start;
                        }
                    }
                }
            }

            // avatar, logo, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title title"
                        "text text"
                        "avatar logo"
                        "avatar author"
                        / minmax(0, min-content) minmax(0, 100%);
                    grid-template:
                        "title  title   title   title"
                        "text   text    text    text"
                        ".      avatar  logo    ."
                        ".      avatar  author  ."
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);

                    .op3-element {
                        &[data-op3-element-spec="logo"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="author"] {
                            align-self: start;
                        }
                    }
                }
            }

            // No avatar
            &[data-op3-block-display-avatar="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "title"
                        "text"
                        "avatar"
                        "logo"
                        "author"
                        "company"
                        / minmax(0, 100%);
                    justify-content: center;

                    .op3-element[data-op3-element-spec="author"],
                    .op3-element[data-op3-element-spec="company"] {
                        align-self: center;
                        justify-self: center;
                        text-align: center;
                    }

                    .op3-element[data-op3-element-spec="logo"] {
                        margin-bottom: 10px;
                    }
                }
            }
        }

        [data-op3-block-layout-#{$device}="5"] {
            .op3-element-testimonialitem__children {
                text-align: center;
                grid-template:
                    ".      avatar  logo     ."
                    ".      avatar  author   ."
                    ".      avatar  company  ."
                    "title  title   title    title"
                    "text   text    text    text"
                    / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);

                .op3-element {
                    &[data-op3-element-spec="avatar"] {
                        align-self: start;
                        justify-self: end;
                    }

                    &[data-op3-element-spec="company"] {
                        align-self: start;
                        justify-self: start;
                        text-align: left;
                    }

                    &[data-op3-element-spec="author"] {
                        align-self: center;
                        justify-self: start;
                        text-align: left;
                    }

                    &[data-op3-element-spec="logo"] {
                        align-self: end;
                        justify-self: start;
                    }
                }
            }

            // add space between avatar & title
            &[data-op3-block-display-title="1"] {
                .op3-element-testimonialitem__children {
                    .op3-element[data-op3-element-spec="title"] {
                        margin-top: 10px;
                    }
                }
            }

            // add space between avatar & text (when title is hidden)
            &[data-op3-block-display-title="0"] {
                .op3-element-testimonialitem__children {
                    .op3-element[data-op3-element-spec="text"] {
                        margin-top: 5px;
                    }
                }
            }

            // remove gap when avatar is hidden
            &[data-op3-block-display-avatar="0"] {
                .op3-element-testimonialitem__children {
                    grid-gap: 0;

                    .op3-element[data-op3-element-spec="author"],
                    .op3-element[data-op3-element-spec="company"],
                    .op3-element[data-op3-element-spec="logo"] {
                        margin-bottom: 5px;
                    }
                }
            }

            // avatar, company
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        ".      avatar  company ."
                        "title  title   title   title"
                        "text   text    text    text"
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);
                }

                .op3-element {
                    &[data-op3-element-spec="company"] {
                        align-self: center;
                    }
                }
            }

            // avatar, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        ".      avatar  author  ."
                        "title  title   title   title"
                        "text   text    text    text"
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);
                }
            }

            // avatar, logo
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        ".      avatar  logo  ."
                        "title  title   title   title"
                        "text   text    text    text"
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);
                }

                .op3-element {
                    &[data-op3-element-spec="logo"] {
                        align-self: center;
                    }
                }
            }

            // avatar, company, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        ".      avatar  author  ."
                        ".      avatar  company ."
                        "title  title   title   title"
                        "text   text    text    text"
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);

                    .op3-element {
                        &[data-op3-element-spec="author"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="company"] {
                            align-self: start;
                        }
                    }
                }
            }

            // avatar, logo, company
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        ".      avatar  logo    ."
                        ".      avatar  company ."
                        "title  title   title   title"
                        "text   text    text    text"
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);

                    .op3-element {
                        &[data-op3-element-spec="logo"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="company"] {
                            align-self: start;
                        }
                    }
                }
            }

            // avatar, logo, author
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        ".      avatar  logo    ."
                        ".      avatar  author  ."
                        "title  title   title   title"
                        "text   text    text    text"
                        / minmax(0%, auto) minmax(min-content, max-content) minmax(min-content, max-content) minmax(0%, auto);

                    .op3-element {
                        &[data-op3-element-spec="logo"] {
                            align-self: end;
                        }

                        &[data-op3-element-spec="author"] {
                            align-self: start;
                        }
                    }
                }
            }

            // No avatar
            &[data-op3-block-display-avatar="0"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "avatar"
                        "logo"
                        "author"
                        "company"
                        "title"
                        "text"
                        / minmax(0, 100%);
                    justify-content: center;

                    .op3-element[data-op3-element-spec="author"],
                    .op3-element[data-op3-element-spec="company"] {
                        align-self: center;
                        justify-self: center;
                        text-align: center;
                    }

                    .op3-element[data-op3-element-spec="logo"] {
                        margin-bottom: 10px;
                    }
                }
            }
        }

        [data-op3-block-layout-#{$device}="6"] {
            .op3-element-testimonialitem__children {
                grid-template:
                    "avatar"
                    "author"
                    "company"
                    "title"
                    "text"
                    "logo"
                    / minmax(0, 100%);

                .op3-element[data-op3-element-spec="author"] {
                    margin-bottom: 5px;
                }

                .op3-element[data-op3-element-spec="avatar"],
                .op3-element[data-op3-element-spec="company"] {
                    margin-bottom: 10px;
                }
            }

            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="0"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="1"][data-op3-block-display-logo="0"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="1"][data-op3-block-display-author="0"][data-op3-block-display-logo="1"],
            &[data-op3-block-display-avatar="1"][data-op3-block-display-company="0"][data-op3-block-display-author="1"][data-op3-block-display-logo="1"] {
                .op3-element-testimonialitem__children {
                    grid-template:
                        "avatar"
                        "title"
                        "text"
                        "author"
                        "company"
                        "logo"
                        / minmax(0, 100%);
                }
            }
        }

        // Layouts 9 has been removed as per OP3-1105,
        // but to make the code backward-compatible,
        // it now uses CSS from layout 7
        [data-op3-block-layout-#{$device}="7"],
        [data-op3-block-layout-#{$device}="9"] {
            .op3-element-testimonialitem__children {
                grid-template:
                    "avatar title"
                    "avatar text"
                    "avatar author"
                    "avatar company"
                    "avatar logo"
                    / minmax(0, min-content) minmax(0, 100%);
                text-align: left;

                .op3-element[data-op3-element-spec="author"],
                .op3-element[data-op3-element-spec="company"],
                .op3-element[data-op3-element-spec="logo"] {
                    margin-bottom: 5px;
                }

                .op3-element[data-op3-element-spec="title"] {
                    align-self: end;
                }

                .op3-element[data-op3-element-spec="logo"] {
                    align-self: end;
                }
            }
        }

        // Layouts 10 has been removed as per OP3-1105,
        // but to make the code backward-compatible,
        // it now uses CSS from layout 8
        [data-op3-block-layout-#{$device}="8"],
        [data-op3-block-layout-#{$device}="10"] {
            .op3-element-testimonialitem__children {
                grid-template:
                    "title      avatar"
                    "text       avatar"
                    "author     avatar"
                    "company    avatar"
                    "logo       avatar"
                    / minmax(0, 100%) minmax(0, min-content);
                text-align: left;

                .op3-element[data-op3-element-spec="author"],
                .op3-element[data-op3-element-spec="company"],
                .op3-element[data-op3-element-spec="logo"] {
                    margin-bottom: 5px;
                }

                .op3-element[data-op3-element-spec="title"] {
                    align-self: end;
                }

                .op3-element[data-op3-element-spec="logo"] {
                    align-self: start;
                }
            }
        }
    }
}

// Item layouts.
@include testimonialLayout(desktop);

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

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

// Wrap and stack columns.
@media (min-width: ($breakpoint-tablet + 1)) {
    @include testimonialColumnsWrapAndStack(desktop);
}

@media (max-width: $breakpoint-tablet) and (min-width: ($breakpoint-mobile + 1)) {
    @include testimonialColumnsWrapAndStack(tablet);
}

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