.et-text-image-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    // Alignment Variations
    .et-align-vertical-top & {
        justify-content: flex-start;
    }

    .et-align-vertical-center & {
        justify-content: center;
    }

    .et-align-vertical-bottom & {
        justify-content: flex-end;
    }

    .et-align-horizontal-left & {
        align-items: flex-start;
    }

    .et-align-horizontal-center & {
        align-items: center;
    }

    .et-align-horizontal-right & {
        align-items: flex-end;
    }
}

.et-widget-textimage {

    .et-textfield {
        width: 100%;
    }

    // Background
    &.bg-fullsize,
    &.bg-boxed .et-text-image-content  {
        background-color: $colorNeutral2;
        color: color-yiq($colorNeutral2);
    }

    .et-shorten-to-text:after {
        background: linear-gradient(to bottom, rgba($colorNeutral2, 0) 0, $colorNeutral2 100%);
    }

    // Content: Image & Text
    .et-text-image {
        &-content {
            padding: rem(30px);
            height: 100%;

            .btn-link {
                font-weight: $font-weight-bold;
                padding-left: 0;
                padding-right: 0;
            }
        }

        &-image {
            padding-top: 0;
            padding-bottom: 0;

            // Default style: min-height with object-fit cover
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                min-height: 275px;
            }

            &.et-image-display-mode-contain {
                img {
                    object-fit: contain;
                }
            }

            &.et-image-display-mode-native {
                img {
                    width: auto;
                    height: auto;
                    object-fit: none;
                    min-height: auto;
                }
            }
        }

        &-link {
            margin-top: 10px;
        }
    }

    // Layout variations
    .et-layout-textImage,
    .et-layout-imageText {
        .et-text-image-image {
            order: 1;

            @include media-breakpoint-only(xs) {
                margin-bottom: 10px;
            }
        }

        &.et-text-image-nopadding {
            .et-text-image-image {
                @include media-breakpoint-only(xs) {
                    margin-bottom: 0;
                }
            }
        }

        .et-text-image-content-wrapper {
            order: 2;
        }
    }

    @include media-breakpoint-up(sm) {
        .et-layout-textImage {
            .et-text-image-image {
                order: 2;
            }

            .et-text-image-content-wrapper {
                order: 1;
            }

            &.et-text-image-nopadding {
                .et-text-image-image {
                    padding-left: 0;
                }

                .et-text-image-content {
                    padding-right: rem($grid-gutter-width / 2) + rem(30px); // add removed padding, so that text is still correctly aligned

                    &-wrapper {
                        padding-right: 0;
                    }
                }
            }
        }

        .et-layout-imageText {
            .et-text-image-image {
                order: 1;
            }

            .et-text-image-content-wrapper {
                order: 2;
            }

            // No-Padding Option
            &.et-text-image-nopadding {
                .et-text-image-image {
                    padding-right: 0;
                }

                .et-text-image-content {
                    padding-left: rem($grid-gutter-width / 2) + rem(30px); // add removed padding, so that text is still correctly aligned

                    &-wrapper {
                        padding-left: 0;
                    }
                }
            }
        }
    }

    .et-text-image-links {
        display: flex;
        flex-wrap: wrap;
        gap: $grid-gutter-width / 2;
    }
}