diff --git a/src/layouts/grid/component.tsx b/src/layouts/grid/component.tsx
index 345b385b..b4d053fa 100644
--- a/src/layouts/grid/component.tsx
+++ b/src/layouts/grid/component.tsx
@@ -87,7 +87,6 @@ export function Grid({
           const sizeResponsive = childProps.sizeResponsive ?? {};
           const itemStyles: React.CSSProperties = {
             ...childProps.style,
-            // @ts-expect-error CSS custom properties
             '--kiba-grid-item-gutter': gutter,
             '--kiba-grid-item-alignment': childProps.alignment ? getFlexItemAlignment(childProps.alignment) : 'auto',
             '--kiba-grid-item-width': getItemWidth(columnCount, size, gutter),
@@ -96,22 +95,15 @@ export function Grid({
               '--kiba-grid-item-height': '100%',
               '--kiba-grid-item-overflow-y': 'auto',
             } : {}),
-            ...(sizeResponsive.small !== undefined ? {
-              '--kiba-grid-item-width-sm': getItemWidth(columnCount, sizeResponsive.small, gutter),
-              '--kiba-grid-item-display-sm': getItemDisplay(sizeResponsive.small),
-            } : {}),
-            ...(sizeResponsive.medium !== undefined ? {
-              '--kiba-grid-item-width-md': getItemWidth(columnCount, sizeResponsive.medium, gutter),
-              '--kiba-grid-item-display-md': getItemDisplay(sizeResponsive.medium),
-            } : {}),
-            ...(sizeResponsive.large !== undefined ? {
-              '--kiba-grid-item-width-lg': getItemWidth(columnCount, sizeResponsive.large, gutter),
-              '--kiba-grid-item-display-lg': getItemDisplay(sizeResponsive.large),
-            } : {}),
-            ...(sizeResponsive.extraLarge !== undefined ? {
-              '--kiba-grid-item-width-xl': getItemWidth(columnCount, sizeResponsive.extraLarge, gutter),
-              '--kiba-grid-item-display-xl': getItemDisplay(sizeResponsive.extraLarge),
-            } : {}),
+            // @ts-expect-error
+            '--kiba-grid-item-width-sm': sizeResponsive.small !== undefined ? getItemWidth(columnCount, sizeResponsive.small, gutter) : 'initial',
+            '--kiba-grid-item-display-sm': sizeResponsive.small !== undefined ? getItemDisplay(sizeResponsive.small) : 'initial',
+            '--kiba-grid-item-width-md': sizeResponsive.medium !== undefined ? getItemWidth(columnCount, sizeResponsive.medium, gutter) : 'initial',
+            '--kiba-grid-item-display-md': sizeResponsive.medium !== undefined ? getItemDisplay(sizeResponsive.medium) : 'initial',
+            '--kiba-grid-item-width-lg': sizeResponsive.large !== undefined ? getItemWidth(columnCount, sizeResponsive.large, gutter) : 'initial',
+            '--kiba-grid-item-display-lg': sizeResponsive.large !== undefined ? getItemDisplay(sizeResponsive.large) : 'initial',
+            '--kiba-grid-item-width-xl': sizeResponsive.extraLarge !== undefined ? getItemWidth(columnCount, sizeResponsive.extraLarge, gutter) : 'initial',
+            '--kiba-grid-item-display-xl': sizeResponsive.extraLarge !== undefined ? getItemDisplay(sizeResponsive.extraLarge) : 'initial',
           };
           return (
             <div
diff --git a/src/layouts/stack/component.tsx b/src/layouts/stack/component.tsx
index abec0689..0ea39ec1 100644
--- a/src/layouts/stack/component.tsx
+++ b/src/layouts/stack/component.tsx
@@ -161,19 +161,23 @@ export function Stack({
   const shouldWrapItems = props.shouldWrapItems || false;
   const stackStyles: React.CSSProperties = {
     '--kiba-stack-direction-base': getDirectionValue(direction),
-    ...responsiveValueToCss(props.directionResponsive, '--kiba-stack-direction', getDirectionValue),
+    ...responsiveValueToCss(props.directionResponsive, '--kiba-stack-direction', getDirectionValue, true),
     '--kiba-stack-child-alignment-base': getFlexItemAlignment(childAlignment),
-    ...responsiveValueToCss(props.childAlignmentResponsive, '--kiba-stack-child-alignment', getFlexItemAlignment),
+    ...responsiveValueToCss(props.childAlignmentResponsive, '--kiba-stack-child-alignment', getFlexItemAlignment, true),
     '--kiba-stack-content-alignment-base': getFlexContentAlignment(contentAlignment),
-    ...responsiveValueToCss(props.contentAlignmentResponsive, '--kiba-stack-content-alignment', getFlexContentAlignment),
+    ...responsiveValueToCss(props.contentAlignmentResponsive, '--kiba-stack-content-alignment', getFlexContentAlignment, true),
     '--kiba-stack-height-base': height,
-    ...responsiveValueToCss(props.heightResponsive, '--kiba-stack-height'),
+    ...responsiveValueToCss(props.heightResponsive, '--kiba-stack-height', undefined, true),
     '--kiba-stack-width-base': width,
-    ...responsiveValueToCss(props.widthResponsive, '--kiba-stack-width'),
-    ...(maxHeightResponsive ? { '--kiba-stack-max-height-base': maxHeightResponsive.base ?? 'none', ...responsiveValueToCss(maxHeightResponsive, '--kiba-stack-max-height') } : {}),
-    ...(maxWidthResponsive ? { '--kiba-stack-max-width-base': maxWidthResponsive.base ?? 'none', ...responsiveValueToCss(maxWidthResponsive, '--kiba-stack-max-width') } : {}),
-    ...(minHeightResponsive ? { '--kiba-stack-min-height-base': minHeightResponsive.base ?? '0', ...responsiveValueToCss(minHeightResponsive, '--kiba-stack-min-height') } : {}),
-    ...(minWidthResponsive ? { '--kiba-stack-min-width-base': minWidthResponsive.base ?? '0', ...responsiveValueToCss(minWidthResponsive, '--kiba-stack-min-width') } : {}),
+    ...responsiveValueToCss(props.widthResponsive, '--kiba-stack-width', undefined, true),
+    '--kiba-stack-max-height-base': maxHeightResponsive?.base ?? 'none',
+    ...responsiveValueToCss(maxHeightResponsive, '--kiba-stack-max-height', undefined, true),
+    '--kiba-stack-max-width-base': maxWidthResponsive?.base ?? 'none',
+    ...responsiveValueToCss(maxWidthResponsive, '--kiba-stack-max-width', undefined, true),
+    '--kiba-stack-min-height-base': minHeightResponsive?.base ?? '0',
+    ...responsiveValueToCss(minHeightResponsive, '--kiba-stack-min-height', undefined, true),
+    '--kiba-stack-min-width-base': minWidthResponsive?.base ?? '0',
+    ...responsiveValueToCss(minWidthResponsive, '--kiba-stack-min-width', undefined, true),
     ...(shouldWrapItems && innerShouldAddGutters ? { '--kiba-stack-gap': getPaddingSizeCss(defaultGutter) } : {}),
     ...props.style,
   } as React.CSSProperties;
diff --git a/src/particles/box/component.tsx b/src/particles/box/component.tsx
index de74420e..4c3a6312 100644
--- a/src/particles/box/component.tsx
+++ b/src/particles/box/component.tsx
@@ -40,43 +40,43 @@ export function Box({
   isFullWidth = true,
   ...props
 }: IBoxProps): React.ReactElement {
-  const height = props.height ?? props.heightResponsive?.base ?? (props.isFullHeight ? '100%' : 'auto');
-  const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : 'auto');
+  const height = props.height ?? props.heightResponsive?.base ?? (props.isFullHeight ? '100%' : undefined);
+  const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : undefined);
   const blockType = width === '100%' ? 'block' : 'flex';
   const combinedStyles: React.CSSProperties = {
     ...props.style,
     // @ts-expect-error CSS custom properties are valid but not in CSSProperties type
     '--kiba-box-display': blockType,
-    '--kiba-box-width': width,
-    '--kiba-box-width-sm': props.widthResponsive?.small,
-    '--kiba-box-width-md': props.widthResponsive?.medium,
-    '--kiba-box-width-lg': props.widthResponsive?.large,
-    '--kiba-box-width-xl': props.widthResponsive?.extraLarge,
-    '--kiba-box-height': height,
-    '--kiba-box-height-sm': props.heightResponsive?.small,
-    '--kiba-box-height-md': props.heightResponsive?.medium,
-    '--kiba-box-height-lg': props.heightResponsive?.large,
-    '--kiba-box-height-xl': props.heightResponsive?.extraLarge,
-    '--kiba-box-max-width': props.maxWidth,
-    '--kiba-box-max-width-sm': props.maxWidthResponsive?.small,
-    '--kiba-box-max-width-md': props.maxWidthResponsive?.medium,
-    '--kiba-box-max-width-lg': props.maxWidthResponsive?.large,
-    '--kiba-box-max-width-xl': props.maxWidthResponsive?.extraLarge,
-    '--kiba-box-max-height': props.maxHeight,
-    '--kiba-box-max-height-sm': props.maxHeightResponsive?.small,
-    '--kiba-box-max-height-md': props.maxHeightResponsive?.medium,
-    '--kiba-box-max-height-lg': props.maxHeightResponsive?.large,
-    '--kiba-box-max-height-xl': props.maxHeightResponsive?.extraLarge,
-    '--kiba-box-min-width': props.minWidth,
-    '--kiba-box-min-width-sm': props.minWidthResponsive?.small,
-    '--kiba-box-min-width-md': props.minWidthResponsive?.medium,
-    '--kiba-box-min-width-lg': props.minWidthResponsive?.large,
-    '--kiba-box-min-width-xl': props.minWidthResponsive?.extraLarge,
-    '--kiba-box-min-height': props.minHeight,
-    '--kiba-box-min-height-sm': props.minHeightResponsive?.small,
-    '--kiba-box-min-height-md': props.minHeightResponsive?.medium,
-    '--kiba-box-min-height-lg': props.minHeightResponsive?.large,
-    '--kiba-box-min-height-xl': props.minHeightResponsive?.extraLarge,
+    '--kiba-box-width': width ?? 'initial',
+    '--kiba-box-width-sm': props.widthResponsive?.small ?? 'initial',
+    '--kiba-box-width-md': props.widthResponsive?.medium ?? 'initial',
+    '--kiba-box-width-lg': props.widthResponsive?.large ?? 'initial',
+    '--kiba-box-width-xl': props.widthResponsive?.extraLarge ?? 'initial',
+    '--kiba-box-height': height ?? 'initial',
+    '--kiba-box-height-sm': props.heightResponsive?.small ?? 'initial',
+    '--kiba-box-height-md': props.heightResponsive?.medium ?? 'initial',
+    '--kiba-box-height-lg': props.heightResponsive?.large ?? 'initial',
+    '--kiba-box-height-xl': props.heightResponsive?.extraLarge ?? 'initial',
+    '--kiba-box-max-width': props.maxWidth ?? 'initial',
+    '--kiba-box-max-width-sm': props.maxWidthResponsive?.small ?? 'initial',
+    '--kiba-box-max-width-md': props.maxWidthResponsive?.medium ?? 'initial',
+    '--kiba-box-max-width-lg': props.maxWidthResponsive?.large ?? 'initial',
+    '--kiba-box-max-width-xl': props.maxWidthResponsive?.extraLarge ?? 'initial',
+    '--kiba-box-max-height': props.maxHeight ?? 'initial',
+    '--kiba-box-max-height-sm': props.maxHeightResponsive?.small ?? 'initial',
+    '--kiba-box-max-height-md': props.maxHeightResponsive?.medium ?? 'initial',
+    '--kiba-box-max-height-lg': props.maxHeightResponsive?.large ?? 'initial',
+    '--kiba-box-max-height-xl': props.maxHeightResponsive?.extraLarge ?? 'initial',
+    '--kiba-box-min-width': props.minWidth ?? 'initial',
+    '--kiba-box-min-width-sm': props.minWidthResponsive?.small ?? 'initial',
+    '--kiba-box-min-width-md': props.minWidthResponsive?.medium ?? 'initial',
+    '--kiba-box-min-width-lg': props.minWidthResponsive?.large ?? 'initial',
+    '--kiba-box-min-width-xl': props.minWidthResponsive?.extraLarge ?? 'initial',
+    '--kiba-box-min-height': props.minHeight ?? 'initial',
+    '--kiba-box-min-height-sm': props.minHeightResponsive?.small ?? 'initial',
+    '--kiba-box-min-height-md': props.minHeightResponsive?.medium ?? 'initial',
+    '--kiba-box-min-height-lg': props.minHeightResponsive?.large ?? 'initial',
+    '--kiba-box-min-height-xl': props.minHeightResponsive?.extraLarge ?? 'initial',
     zIndex: props.zIndex,
     position: props.position as React.CSSProperties['position'],
   };
diff --git a/src/particles/box/styles.scss b/src/particles/box/styles.scss
index f9193301..bbc6199f 100644
--- a/src/particles/box/styles.scss
+++ b/src/particles/box/styles.scss
@@ -88,41 +88,41 @@
     &.scrollableVertically { overflow-y: auto; }
     &.scrollableHorizontally { overflow-x: auto; }
 
-    // Responsive breakpoints
+    // Responsive breakpoints - only use responsive variables if explicitly set (not initial)
     @include screen-small {
       width: var(--kiba-box-width-sm, var(--kiba-box-width, 100%));
       height: var(--kiba-box-height-sm, var(--kiba-box-height, auto));
-      max-width: var(--kiba-box-max-width-sm, var(--kiba-box-max-width));
-      max-height: var(--kiba-box-max-height-sm, var(--kiba-box-max-height));
-      min-width: var(--kiba-box-min-width-sm, var(--kiba-box-min-width));
-      min-height: var(--kiba-box-min-height-sm, var(--kiba-box-min-height));
+      max-width: var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none));
+      max-height: var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none));
+      min-width: var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0));
+      min-height: var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0));
     }
 
     @include screen-medium {
       width: var(--kiba-box-width-md, var(--kiba-box-width-sm, var(--kiba-box-width, 100%)));
       height: var(--kiba-box-height-md, var(--kiba-box-height-sm, var(--kiba-box-height, auto)));
-      max-width: var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width)));
-      max-height: var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height)));
-      min-width: var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width)));
-      min-height: var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height)));
+      max-width: var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none)));
+      max-height: var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none)));
+      min-width: var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0)));
+      min-height: var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0)));
     }
 
     @include screen-large {
       width: var(--kiba-box-width-lg, var(--kiba-box-width-md, var(--kiba-box-width-sm, var(--kiba-box-width, 100%))));
       height: var(--kiba-box-height-lg, var(--kiba-box-height-md, var(--kiba-box-height-sm, var(--kiba-box-height, auto))));
-      max-width: var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width))));
-      max-height: var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height))));
-      min-width: var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width))));
-      min-height: var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height))));
+      max-width: var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none))));
+      max-height: var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none))));
+      min-width: var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0))));
+      min-height: var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0))));
     }
 
     @include screen-extra-large {
       width: var(--kiba-box-width-xl, var(--kiba-box-width-lg, var(--kiba-box-width-md, var(--kiba-box-width-sm, var(--kiba-box-width, 100%)))));
       height: var(--kiba-box-height-xl, var(--kiba-box-height-lg, var(--kiba-box-height-md, var(--kiba-box-height-sm, var(--kiba-box-height, auto)))));
-      max-width: var(--kiba-box-max-width-xl, var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width)))));
-      max-height: var(--kiba-box-max-height-xl, var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height)))));
-      min-width: var(--kiba-box-min-width-xl, var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width)))));
-      min-height: var(--kiba-box-min-height-xl, var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height)))));
+      max-width: var(--kiba-box-max-width-xl, var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none)))));
+      max-height: var(--kiba-box-max-height-xl, var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none)))));
+      min-width: var(--kiba-box-min-width-xl, var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0)))));
+      min-height: var(--kiba-box-min-height-xl, var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0)))));
     }
   }
 }
diff --git a/src/util/responsiveUtil.ts b/src/util/responsiveUtil.ts
index 122f5883..f4ead937 100644
--- a/src/util/responsiveUtil.ts
+++ b/src/util/responsiveUtil.ts
@@ -14,22 +14,23 @@ export const responsiveValueToCss = <FieldType>(
   field: ResponsiveField<FieldType> | null | undefined,
   variablePrefix: string,
   converter: CssConverter<FieldType> = identityConverter,
+  shouldResetInheritance = false,
 ): Record<string, string> => {
   if (!field) {
+    if (shouldResetInheritance) {
+      return {
+        [`${variablePrefix}-small`]: 'initial',
+        [`${variablePrefix}-medium`]: 'initial',
+        [`${variablePrefix}-large`]: 'initial',
+        [`${variablePrefix}-extraLarge`]: 'initial',
+      };
+    }
     return {};
   }
   const result: Record<string, string> = {};
-  if (field.small !== undefined) {
-    result[`${variablePrefix}-small`] = converter(field.small);
-  }
-  if (field.medium !== undefined) {
-    result[`${variablePrefix}-medium`] = converter(field.medium);
-  }
-  if (field.large !== undefined) {
-    result[`${variablePrefix}-large`] = converter(field.large);
-  }
-  if (field.extraLarge !== undefined) {
-    result[`${variablePrefix}-extraLarge`] = converter(field.extraLarge);
-  }
+  result[`${variablePrefix}-small`] = field.small !== undefined ? converter(field.small) : 'initial';
+  result[`${variablePrefix}-medium`] = field.medium !== undefined ? converter(field.medium) : 'initial';
+  result[`${variablePrefix}-large`] = field.large !== undefined ? converter(field.large) : 'initial';
+  result[`${variablePrefix}-extraLarge`] = field.extraLarge !== undefined ? converter(field.extraLarge) : 'initial';
   return result;
 };