diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts
index 7277164bed70..bde17115f802 100644
--- a/packages/fiori/src/Wizard.ts
+++ b/packages/fiori/src/Wizard.ts
@@ -55,23 +55,12 @@ const STEP_SWITCH_THRESHOLDS = {
 	MAX: 1,
 };
 
-type ResponsiveBreakpoints = {
-	[key: string]: string,
-}
-
 type WizardStepChangeEventDetail = {
 	step: WizardStep,
 	previousStep: WizardStep,
 	withScroll: boolean,
 }
 
-const RESPONSIVE_BREAKPOINTS: ResponsiveBreakpoints = {
-	"0": "S",
-	"599": "M",
-	"1023": "L",
-	"1439": "XL",
-};
-
 type AccessibilityInformation = {
 	ariaSetsize: number,
 	ariaPosinset: number,
@@ -257,9 +246,6 @@ class Wizard extends UI5Element {
 	@property({ type: Array })
 	_groupedTabs: Array<WizardTab> = [];
 
-	@property()
-	_breakpoint?: string
-
 	/**
 	 * Defines the steps.
 	 *
@@ -486,8 +472,6 @@ class Wizard extends UI5Element {
 
 		this._prevWidth = this.width;
 		this._prevContentHeight = this.contentHeight;
-
-		this._calcCurrentBreakpoint();
 	}
 
 	attachStepsResizeObserver() {
@@ -503,12 +487,6 @@ class Wizard extends UI5Element {
 		});
 	}
 
-	_calcCurrentBreakpoint() {
-		const breakpointDimensions = Object.keys(RESPONSIVE_BREAKPOINTS).reverse();
-		const breakpoint = breakpointDimensions.find((size: string) => Number(size) < this.width!);
-		this._breakpoint = breakpoint ? RESPONSIVE_BREAKPOINTS[breakpoint] : RESPONSIVE_BREAKPOINTS["0"];
-	}
-
 	/**
 	 * Updates the expanded attribute for each ui5-wizard-tab based on the ui5-wizard width
 	 * @private
diff --git a/packages/fiori/src/themes/Wizard.css b/packages/fiori/src/themes/Wizard.css
index 7864833f73b5..f62067abc7c1 100644
--- a/packages/fiori/src/themes/Wizard.css
+++ b/packages/fiori/src/themes/Wizard.css
@@ -5,30 +5,43 @@
 	height: 100%;
 	width: 100%;
 	overflow: auto;
-}
-
-:host([_breakpoint="S"])::part(navigator),
-:host([_breakpoint="S"])::part(step-content) {
-	padding-left: 1rem;
-	padding-right: 1rem;
-}
-
-:host([_breakpoint="M"])::part(navigator),
-:host([_breakpoint="M"])::part(step-content) {
-	padding-left: 2rem;
-	padding-right: 2rem;
-}
-
-:host([_breakpoint="L"])::part(navigator),
-:host([_breakpoint="L"])::part(step-content) {
-	padding-left: 2rem;
-	padding-right: 2rem;
-}
-
-:host([_breakpoint="XL"])::part(navigator),
-:host([_breakpoint="XL"])::part(step-content) {
-	padding-left: 3rem;
-	padding-right: 3rem;
+	container-type: inline-size;
+}
+
+/* S Size */
+@container (max-width: 599px) {
+	:host::part(navigator),
+	:host::part(step-content) {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+}
+
+/* M Size */
+@container (min-width: 600px) and (max-width: 1023px) {
+	:host::part(navigator),
+	:host::part(step-content) {
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+}
+
+/* L Size */
+@container (min-width: 1024px) and (max-width: 1439px) {
+	:host::part(navigator),
+	:host::part(step-content) {
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+}
+
+/* XL Size */
+@container (min-width: 1440px) {
+	:host::part(navigator),
+	:host::part(step-content) {
+		padding-left: 3rem;
+		padding-right: 3rem;
+	}
 }
 
 .ui5-wiz-root {
diff --git a/packages/fiori/test/specs/Wizard.spec.js b/packages/fiori/test/specs/Wizard.spec.js
index d7308931f7a0..f5b6cd60489d 100644
--- a/packages/fiori/test/specs/Wizard.spec.js
+++ b/packages/fiori/test/specs/Wizard.spec.js
@@ -404,27 +404,6 @@ describe("Wizard general interaction", () => {
 		assert.ok(await disabledPopover.isDisplayedInViewport(), "Popover is opened.");
 	});
 
-	it("tests responsive paddings", async () => {
-		await browser.url(`test/pages/Wizard.html`);
-		const wizard = $("#wiz");
-
-		// resize window S
-		await browser.setWindowSize(500, 1000);
-		assert.strictEqual(await wizard.getProperty("_breakpoint"), "S", "Small breakpoint is enabled");
-
-		// resize window M
-		await browser.setWindowSize(1000, 1000);
-		assert.strictEqual(await wizard.getProperty("_breakpoint"), "M", "Medium breakpoint is enabled");
-
-		// resize window L
-		await browser.setWindowSize(1200, 1000);
-		assert.strictEqual(await wizard.getProperty("_breakpoint"), "L", "Large breakpoint is enabled");
-
-		// resize window XL
-		await browser.setWindowSize(1600, 1000);
-		assert.strictEqual(await wizard.getProperty("_breakpoint"), "XL", "Extra Large breakpoint is enabled");
-	});
-
 	it("WizardPageMode: move to next step", async () => {
 		await browser.url(`test/pages/WizardPageMode_test.html`);