.s_dynamic {
    // TODO Dynamic snippet loading style: Temporarily disabled in preview mode
    // since it needs interactions to be available.
    body:not(.editor_enable) #wrap &:not(.o_check_scroll_position) {
        &.o_dynamic_snippet_loading {
            section:not(.s_dynamic_snippet_holder) {
                display: none !important;
            }
            .s_dynamic_snippet_holder {
                display: block !important;
            }
        }
        &:not(.o_dynamic_snippet_loading):has(.dynamic_snippet_template:empty) {
            display: none !important;
        }
    }
    [data-url] {
        cursor: pointer;
    }
    img {
        object-fit: scale-down;
    }

    //
    // Handle adaptations according to the container size and s_dynamic_snippet_title position.
    //

    // Define entries minimum size as half 'o_small_container' width.
    $-container-small-inner-width-max: map-get($container-max-widths, md) - $grid-gutter-width;
    $-entry-min-width: ($-container-small-inner-width-max * 0.5) - $grid-gutter-width;

    > .container {
        .s_dynamic_snippet_title.s_dynamic_snippet_title_aside + .s_dynamic_snippet_content .s_dynamic_snippet_row > * {
            @include media-breakpoint-up(lg) {
                // Switch to a fluid layout in order to keep entries readable.
                // Our target grid is 2columns based
                flex: 0 1 MAX(var(--DynamicSnippet__entry-maxWidth, #{$-entry-min-width}), 50%);
            }
        }
    }

    > .o_container_small {
        .s_dynamic_snippet_row > * {
            @include media-breakpoint-up(lg) {
                flex: 0 1 MAX(var(--DynamicSnippet__entry-maxWidth, #{$-entry-min-width}), 50%);
            }
        }

        .s_dynamic_snippet_title.s_dynamic_snippet_title_aside {
            // By default 's_dynamic_snippet_title_aside' is col-3.
            // We adjust it col-5 to increase readability when inside a small container
            min-width: percentage(divide(5, $grid-columns));

            + .s_dynamic_snippet_content .s_dynamic_snippet_row > * {
                @include media-breakpoint-up(lg) {
                    flex: 1 1 var(--DynamicSnippet__entry-maxWidth, #{$-entry-min-width});
                }
            }
        }
    }

    &.s_dynamic_snippet_cover_left {
        .s_dynamic_snippet_content_position {
            flex-direction: row-reverse;
        }
    }
}