diff --git a/packages/ui/src/Panel/Panel.vue b/packages/ui/src/Panel/Panel.vue
index 0ef99f99c5..55df96b0d2 100644
--- a/packages/ui/src/Panel/Panel.vue
+++ b/packages/ui/src/Panel/Panel.vue
@@ -12,7 +12,7 @@ const props = defineProps({
 <template>
     <div
         :class="[
-            'relative bg-gray-200/50 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950 dark:inset-shadow-2xs dark:inset-shadow-black',
+            '@container/panel relative bg-gray-200/50 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950 dark:inset-shadow-2xs dark:inset-shadow-black',
             'w-full rounded-2xl mb-5 p-1.75 [&:has([data-ui-panel-header])]:pt-0 focus-none starting-style-transition starting-style-transition--siblings',
         ]"
         data-ui-panel
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 7f1985e50d..313fe24541 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -6,11 +6,11 @@
     display: grid;
     --grid-columns: 12;
     grid-template-columns: repeat(var(--grid-columns), 1fr);
-    @apply gap-3 lg:gap-8;
+    @apply gap-x-3 gap-6 @lg/panel:gap-8;
 
     aside & {
         /* Decrease */
-        @apply gap-x-2 gap-y-3 lg:gap-y-6;
+        @apply gap-x-2 gap-y-3 @lg/panel:gap-y-6;
     }
 
     .form-group {
@@ -18,7 +18,7 @@
     }
 }
 
-@variant lg {
+@variant @lg/panel {
     .field-w-25  { --col-span: calc(var(--grid-columns) * 0.25); }
     .field-w-33  { --col-span: calc(var(--grid-columns) * 0.333); }
     .field-w-50  { --col-span: calc(var(--grid-columns) * 0.5); }