diff --git a/components/content-blocks/Questions/styles.ts b/components/content-blocks/Questions/styles.ts
index d1ff55fb..caed06b9 100644
--- a/components/content-blocks/Questions/styles.ts
+++ b/components/content-blocks/Questions/styles.ts
@@ -13,7 +13,6 @@ export const QuestionList = styled.ol`
 
   background-color: var(--list-background-color, transparent);
   color: var(--question-color);
-  isolation: isolate;
   list-style-type: decimal;
   list-style-position: inside;
   padding: var(--list-padding, 0);
diff --git a/components/questions/Calculator/index.tsx b/components/questions/Calculator/index.tsx
index 2e08676f..3a7d05e8 100644
--- a/components/questions/Calculator/index.tsx
+++ b/components/questions/Calculator/index.tsx
@@ -5,7 +5,6 @@ import useAnswer from "@/hooks/useAnswer";
 import { isNullish } from "@/lib/utils";
 import { WidgetInput } from "@/types/answers";
 import InteractiveCalculator from "@/components/calculators/Interactive";
-import QuestionNumber from "../QuestionNumber";
 import * as Styled from "./styles";
 import { Equation } from "@/types/calculators";
 
@@ -32,7 +31,7 @@ const CalculatorQuestion: FunctionComponent<CalculatorQuestionProps> = ({
   if (isNullish(equation)) return null;
 
   return (
-    <QuestionNumber {...{ id }}>
+    <Styled.QuestionNumber {...{ id }}>
       <label htmlFor={id}>{questionText}</label>
       <Styled.CalculatorWrapper>
         <InteractiveCalculator
@@ -44,7 +43,7 @@ const CalculatorQuestion: FunctionComponent<CalculatorQuestionProps> = ({
           }}
         />
       </Styled.CalculatorWrapper>
-    </QuestionNumber>
+    </Styled.QuestionNumber>
   );
 };
 
diff --git a/components/questions/Calculator/styles.ts b/components/questions/Calculator/styles.ts
index 2923119c..211296a6 100644
--- a/components/questions/Calculator/styles.ts
+++ b/components/questions/Calculator/styles.ts
@@ -1,6 +1,7 @@
 "use client";
 import styled from "styled-components";
 import { token } from "@rubin-epo/epo-react-lib/styles";
+import BaseQuestionNumber from "../QuestionNumber";
 
 export const CalculatorWrapper = styled.div`
   display: flex;
@@ -16,3 +17,7 @@ export const CalculatorWrapper = styled.div`
     font-size: 150%;
   }
 `;
+
+export const QuestionNumber = styled(BaseQuestionNumber)`
+  container-type: inline-size;
+`;
diff --git a/components/questions/QuestionNumber/index.tsx b/components/questions/QuestionNumber/index.tsx
index a5cdf05f..03b08d95 100644
--- a/components/questions/QuestionNumber/index.tsx
+++ b/components/questions/QuestionNumber/index.tsx
@@ -25,7 +25,7 @@ const QuestionNumber: FunctionComponent<
       value={questionIndex + 1}
       data-direction={direction}
       className={className}
-      style={{ zIndex: maxIndex - questionIndex }}
+      style={{ "--z-index-dropdown-open": maxIndex - questionIndex }}
     >
       {children}
     </Styled.Number>
diff --git a/components/questions/QuestionNumber/styles.ts b/components/questions/QuestionNumber/styles.ts
index 1cef71b3..8d0ff5e2 100644
--- a/components/questions/QuestionNumber/styles.ts
+++ b/components/questions/QuestionNumber/styles.ts
@@ -2,9 +2,6 @@
 import styled from "styled-components";
 
 export const Number = styled.li`
-  container-type: inline-size;
-  position: relative;
-
   &[data-direction="block"] {
     & > * + * {
       margin-block-start: var(--PADDING_SMALL, 20px);