вопрос типа свое поле для ввода выводит картинку

lib/components/ViewPublicationPage/questions/Text.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 
 import CustomTextField from "@ui_kit/CustomTextField";
 
@@ -18,6 +18,7 @@ export const Text = ({ currentQuestion }: TextProps) => {
     const theme = useTheme();
     const qid = useQuizId();
     const { answers } = useQuizViewStore();
+    const isMobile = useMediaQuery(theme.breakpoints.down(650));
     const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
 
     const inputHC = useDebouncedCallback(async (text) => {
@@ -40,9 +41,10 @@ export const Text = ({ currentQuestion }: TextProps) => {
             <Box
                 sx={{
                     display: "flex",
-                    flexDirection: "column",
                     width: "100%",
                     marginTop: "20px",
+                    flexDirection: isMobile ? "column-reverse" : undefined,
+                    alignItems: "center"
                 }}
             >
                 <CustomTextField
@@ -60,6 +62,16 @@ export const Text = ({ currentQuestion }: TextProps) => {
                         }
                     }}
                 />
+                {currentQuestion.content.back && currentQuestion.content.back !== " " && (
+                    <Box sx={{ maxWidth: "400px", width: "100%", height: "300px", margin: "15px" }}>
+                        <img
+                            key={currentQuestion.id}
+                            src={currentQuestion.content.back}
+                            style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                            alt=""
+                        />
+                    </Box>
+                )}
             </Box>
         </Box>
     );