diff --git a/app/assets/images/enterprise/nextcloud-sso-authentication.png b/app/assets/images/enterprise/nextcloud-sso-authentication.png
new file mode 100644
index 00000000000..65da457890d
Binary files /dev/null and b/app/assets/images/enterprise/nextcloud-sso-authentication.png differ
diff --git a/app/components/enterprise_edition/banner_component.html.erb b/app/components/enterprise_edition/banner_component.html.erb
index 91c4fd6e3d4..623fe25cc4b 100644
--- a/app/components/enterprise_edition/banner_component.html.erb
+++ b/app/components/enterprise_edition/banner_component.html.erb
@@ -1,98 +1,101 @@
 <%=
   component_wrapper(tag: "turbo-frame") do
-    grid_layout(
-      "op-enterprise-banner",
-      **@system_arguments
-    ) do |grid|
-      if inline?
-        grid.with_area(:visual) do
-          render(Primer::Beta::Octicon.new(icon: :"op-enterprise-addons", classes: "op-enterprise-banner--icon"))
+    render(Primer::BaseComponent.new(tag: :div, classes: "op-enterprise-banner-container")) do
+      grid_layout(
+        "op-enterprise-banner",
+        **@system_arguments
+      ) do |grid|
+        if inline?
+          grid.with_area(:visual) do
+            render(Primer::Beta::Octicon.new(icon: :"op-enterprise-addons", classes: "op-enterprise-banner--icon"))
+          end
         end
-      end
 
-      grid.with_area(:content) do
-        flex_layout do |flex|
-          flex.with_row do
-            if medium? || large?
-              flex_layout(
-                classes: "op-enterprise-banner--title-wrapper",
-                align_items: :center,
-                mb: 3) do |title_flex|
-                title_flex.with_column do
-                  render(
-                    Primer::Beta::Octicon.new(
-                      icon: :"op-enterprise-addons",
-                      size: :medium,
-                      classes: "upsell-colored"
+        grid.with_area(:content) do
+          flex_layout do |flex|
+            flex.with_row do
+              if medium? || large?
+                flex_layout(
+                  classes: "op-enterprise-banner--title-wrapper",
+                  align_items: :center,
+                  mb: 3
+                ) do |title_flex|
+                  title_flex.with_column do
+                    render(
+                      Primer::Beta::Octicon.new(
+                        icon: :"op-enterprise-addons",
+                        size: :medium,
+                        classes: "upsell-colored"
+                      )
                     )
-                  )
-                end
+                  end
 
-                title_flex.with_column(ml: 2) do
-                  render(Primer::Beta::Heading.new(tag: :h2)) { title }
+                  title_flex.with_column(ml: 2) do
+                    render(Primer::Beta::Heading.new(tag: :h2)) { title }
+                  end
                 end
+              else
+                render(Primer::Beta::Text.new(font_weight: :bold)) { title }
               end
-            else
-              render(Primer::Beta::Text.new(font_weight: :bold)) { title }
-            end
-          end
-
-          flex.with_row(classes: "op-enterprise-banner--description") do
-            concat render(Primer::Beta::Text.new(tag: :p)) { description }
-
-            unless large?
-              concat render(Primer::Beta::Text.new(tag: :p)) { plan_text }
-            end
-          end
-
-          if features.present?
-            flex.with_row do
-              content_tag(:ul) { safe_join(features.map { |text| render(Primer::Beta::Text.new(tag: :li)) { text } }) }
-            end
-          end
-
-          if large?
-            flex.with_row(my: 2) do
-              video_tag @video,
-                        controls: false,
-                        class: "op-enterprise-banner--video-control",
-                        autoplay: true,
-                        loop: true,
-                        muted: true
             end
 
-            flex.with_row do
-              render(Primer::Beta::Text.new(tag: :p, text_align: :center)) { plan_text }
-            end
-          end
+            flex.with_row(classes: "op-enterprise-banner--description") do
+              concat render(Primer::Beta::Text.new(tag: :p)) { description }
 
-          flex.with_row(mt: 1) do
-            render EnterpriseEdition::UpsellButtonsComponent.new(
-              feature_key,
-              justify_content: (large? ? :center : :flex_start)
-            )
+              unless large?
+                concat render(Primer::Beta::Text.new(tag: :p)) { plan_text }
+              end
+            end
+
+            if features.present?
+              flex.with_row do
+                content_tag(:ul) { safe_join(features.map { |text| render(Primer::Beta::Text.new(tag: :li)) { text } }) }
+              end
+            end
+
+            if large?
+              flex.with_row(my: 2) do
+                video_tag @video,
+                          controls: false,
+                          class: "op-enterprise-banner--video-control",
+                          autoplay: true,
+                          loop: true,
+                          muted: true
+              end
+
+              flex.with_row do
+                render(Primer::Beta::Text.new(tag: :p, text_align: :center)) { plan_text }
+              end
+            end
+
+            flex.with_row(mt: 1) do
+              render EnterpriseEdition::UpsellButtonsComponent.new(
+                feature_key,
+                justify_content: (large? ? :center : :flex_start)
+              )
+            end
           end
         end
-      end
 
-      if medium?
-        grid.with_area(:image, **@image_arguments)
-      end
+        if medium?
+          grid.with_area(:image, **@image_arguments)
+        end
 
-      if @dismissable
-        grid.with_area(:dismiss) do
-          classes = medium? ? "op-enterprise-banner--close-icon_hovering" : ""
-          render(
-            Primer::Beta::IconButton.new(
-              classes: class_names("op-enterprise-banner--close-icon", classes),
-              scheme: :invisible,
-              tag: :a,
-              href: dismiss_enterprise_banner_path(feature_key: @dismiss_key),
-              data: { turbo_stream: true, turbo_method: :post },
-              icon: :x,
-              aria: { label: t("ee.upsell.hide_banner") }
+        if @dismissable
+          grid.with_area(:dismiss) do
+            classes = medium? ? "op-enterprise-banner--close-icon_hovering" : ""
+            render(
+              Primer::Beta::IconButton.new(
+                classes: class_names("op-enterprise-banner--close-icon", classes),
+                scheme: :invisible,
+                tag: :a,
+                href: dismiss_enterprise_banner_path(feature_key: @dismiss_key),
+                data: { turbo_stream: true, turbo_method: :post },
+                icon: :x,
+                aria: { label: t("ee.upsell.hide_banner") }
+              )
             )
-          )
+          end
         end
       end
     end
diff --git a/app/components/enterprise_edition/banner_component.sass b/app/components/enterprise_edition/banner_component.sass
index 140a8796886..bfcd38e8295 100644
--- a/app/components/enterprise_edition/banner_component.sass
+++ b/app/components/enterprise_edition/banner_component.sass
@@ -31,6 +31,23 @@
 $op-enterprise-banner-fixed-height-medium: 220px
 $op-enterprise-banner-fixed-height-large: 320px
 
+.op-enterprise-banner-container
+  container-name: banner
+  container-type: inline-size
+
+// Hide the medium banner image when the container is smaller then 1000px
+@container banner (max-width: 1000px)
+  .op-enterprise-banner.op-enterprise-banner_medium
+    grid-template-columns: 1fr
+    height: auto
+
+  .op-enterprise-banner--image
+    background-image: none !important
+
+@container banner (max-width: 1300px)
+  .op-enterprise-banner .op-enterprise-banner--image
+    background-size: cover
+
 .op-enterprise-banner
   display: grid
   grid-auto-flow: column
@@ -50,10 +67,6 @@ $op-enterprise-banner-fixed-height-large: 320px
     grid-template-columns: 2fr 1fr
     height: $op-enterprise-banner-fixed-height-medium
 
-    @media screen and (max-width: $breakpoint-lg)
-      grid-template-columns: 1fr
-      height: auto
-
   &_medium &
     padding: 0
     grid-template-areas: "content graphic"
diff --git a/frontend/src/global_styles/content/_enterprise.sass b/frontend/src/global_styles/content/_enterprise.sass
index 0b5c09007b8..75e30542e92 100644
--- a/frontend/src/global_styles/content/_enterprise.sass
+++ b/frontend/src/global_styles/content/_enterprise.sass
@@ -21,6 +21,8 @@
     border: var(--borderWidth-thin) solid var(--borderColor-severe-muted)
     border-radius: var(--borderRadius-medium)
     background: var(--body-background)
+    container-name: upsellContainer
+    container-type: inline-size
 
 .widget-box--blocks--upsell-container
   position: relative
@@ -52,6 +54,16 @@
 .widget-box--blocks--upsell-image
   @include upsell-image
 
+@container upsellContainer (max-width: 1000px)
+  .widget-box--blocks--upsell-container
+    height: auto
+  .widget-box--blocks--upsell-image
+    background-image: none !important
+
+@container upsellContainer (max-width: 1300px)
+  .widget-box--blocks--upsell-image
+    background-size: cover
+
 .widget-box--blocks--upsell-description
   margin: 10px 0 10px 0
   display: flex
diff --git a/frontend/src/global_styles/openproject/_mixins.sass b/frontend/src/global_styles/openproject/_mixins.sass
index 54413fc91ec..67da5f372ad 100644
--- a/frontend/src/global_styles/openproject/_mixins.sass
+++ b/frontend/src/global_styles/openproject/_mixins.sass
@@ -357,12 +357,6 @@ $scrollbar-size: 10px
   background-position: center right
   background-size: contain
 
-  @media screen and (max-width: $breakpoint-lg)
-    background-image: none !important
-
-  @media screen and (max-width: $breakpoint-xl)
-    background-size: cover
-
   &:after
     content: ""
     position: absolute
diff --git a/modules/storages/app/components/storages/admin/forms/general_info_form_component.html.erb b/modules/storages/app/components/storages/admin/forms/general_info_form_component.html.erb
index 9d9eadc68c8..478f286ac5b 100644
--- a/modules/storages/app/components/storages/admin/forms/general_info_form_component.html.erb
+++ b/modules/storages/app/components/storages/admin/forms/general_info_form_component.html.erb
@@ -1,6 +1,6 @@
 <%=
-    component_wrapper(tag: 'turbo-frame') do
-      render(Primer::Beta::Text.new(tag: :div, test_selector: 'storage-general-info-form')) do
+    component_wrapper(tag: "turbo-frame") do
+      render(Primer::Beta::Text.new(tag: :div, test_selector: "storage-general-info-form")) do
         primer_form_with(
           model:,
           url: form_url,
@@ -8,9 +8,9 @@
           data: {
             "turbo-frame": "page-content",
             controller: "storages--automatically-managed-project-folders-form",
-            'application-target': "dynamic",
-            'storages--automatically-managed-project-folders-form-provider-type-value': storage.provider_type,
-            'storages--automatically-managed-project-folders-form-is-automatically-managed-value': storage.automatic_management_enabled?,
+            "application-target": "dynamic",
+            "storages--automatically-managed-project-folders-form-provider-type-value": storage.provider_type,
+            "storages--automatically-managed-project-folders-form-is-automatically-managed-value": storage.automatic_management_enabled?
           }
         ) do |form|
           flex_layout do |general_info_row|
@@ -20,7 +20,7 @@
             end
 
             general_info_row.with_row(mb: 3) do
-              render(Primer::Beta::Text.new(test_selector: 'storage-provider-configuration-instructions')) { provider_configuration_instructions }
+              render(Primer::Beta::Text.new(test_selector: "storage-provider-configuration-instructions")) { provider_configuration_instructions }
             end
 
             general_info_row.with_row(mb: 3) do
@@ -37,7 +37,13 @@
               end
 
               general_info_row.with_row(mb: 3) do
-                render(EnterpriseEdition::BannerComponent.new(:nextcloud_sso))
+                render(
+                  EnterpriseEdition::BannerComponent.new(
+                    :nextcloud_sso,
+                    variant: :medium,
+                    image: "enterprise/nextcloud-sso-authentication.png"
+                  )
+                )
               end
             end
 
@@ -64,5 +70,5 @@
           end
         end
       end
-  end
+    end
 %>